/* style.css */

/* =========================================
   1. GLOBAL DESIGN TOKENS
   ========================================= */
:root {
  --color-primary: #4a6da7; 
  --color-primary-dark: #3b5a8c;
  --color-accent: #e8f0fe;
  
  --bg-body: #ffffff;
  --bg-section-gray: #f5f5f5;
  --bg-card: #ffffff;

  --text-main: #333333;
  --text-sub: #555555;
  --text-light: #757575;
  --text-on-primary: #ffffff;

  --border-color: #e0e0e0;

  --font-family-base: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --font-size-base: 16px;
  --font-size-h1: 2.25rem;
  --font-size-h2: 1.75rem;
  
  --spacing-container: 1200px;
  --border-radius-base: 4px;
  --border-radius-card: 12px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-hover: 0 12px 30px rgba(74, 109, 167, 0.12); /* 브랜드 컬러 기반 그림자 */
  --transition-fluid: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family-base);
  background-color: var(--bg-section-gray);
  color: var(--text-main);
  line-height: 1.6;
  font-size: var(--font-size-base);
  word-break: keep-all;
}

a { color: var(--text-main); text-decoration: none; transition: var(--transition-base); }
a:hover { color: var(--color-primary); }
ul { list-style: none; }

/* Layout */
.container { max-width: var(--spacing-container); margin: 0 auto; padding: 0 20px; }

/* =========================================
   2. HEADER STYLE
   ========================================= */
.header {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  position: sticky; 
  top: 0; 
  z-index: 100;
  transition: all 0.3s ease;
}

.header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  background-color: rgba(255, 255, 255, 0.98);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

/* Logo */
.logo a {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.5px;
}
.logo i { font-size: 1.2rem; }

/* [수정] 아이콘 표시 제어 (CSS 우선순위 강화: .logo 클래스 추가) */
.logo .logo-icon-mobile { 
    display: none; 
}
.logo .logo-icon-pc { 
    display: inline-block; 
}

.logo span { color: var(--text-main); font-weight: 400; font-size: 1.2rem; }

/* Navigation */
.nav-menu { display: flex; gap: 30px; }
.nav-menu a { position: relative; font-weight: 500; font-size: 0.95rem; color: #444; padding: 5px 0; }
.nav-menu a::after {
  content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px;
  bottom: 0; left: 0; background-color: var(--color-primary);
  transform-origin: bottom right; transition: transform 0.25s ease-out;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--color-primary); font-weight: 700; }
.nav-menu a:hover::after, .nav-menu a.active::after { transform: scaleX(1); transform-origin: bottom left; }

/* User Actions */
.user-actions { display: flex; align-items: center; gap: 12px; }
.user-badge {
  background-color: #f0f4f8; color: var(--color-primary);
  padding: 6px 14px; border-radius: 20px;
  font-size: 0.85rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.btn-login-text {
  background: none; border: 1px solid var(--color-primary); color: var(--color-primary);
  padding: 6px 18px; border-radius: 20px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-login-text:hover { background-color: var(--color-primary); color: #fff; }
.btn-logout-icon {
  background: none; border: none; color: #999;
  font-size: 1.1rem; cursor: pointer; padding: 5px; transition: color 0.2s;
}
.btn-logout-icon:hover { color: #d32f2f; }

/* Main Content Padding */
.main-content { padding-top: 40px; padding-bottom: 80px; min-height: 80vh; }


/* =========================================
   3. COMPONENTS (Buttons, Inputs)
   ========================================= */
/* Buttons */
.btn-primary {
  background-color: var(--color-primary); color: var(--text-on-primary);
  padding: 8px 20px; border-radius: var(--border-radius-base);
  font-weight: 600; border: none; cursor: pointer; transition: var(--transition-base);
}
.btn-primary:hover { background-color: var(--color-primary-dark); }
.btn-primary:disabled {
  background-color: #a0b1cc; color: #f1f1f1; cursor: not-allowed;
  opacity: 0.8; transform: none !important; box-shadow: none !important;
}

.btn-secondary {
  background-color: #fff; border: 1px solid var(--border-color); color: var(--text-sub);
  padding: 8px 20px; border-radius: var(--border-radius-base); cursor: pointer;
}

.btn-danger {
  background-color: #dc3545; color: #ffffff;
  padding: 8px 20px; border-radius: var(--border-radius-base);
  font-weight: 600; border: none; cursor: pointer; transition: var(--transition-base);
}
.btn-danger:hover { background-color: #bb2d3b; }

/* Inputs (Unified Style) */
.input-full, 
.input-base,
.search-box input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-base);
  font-size: 1rem;
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}

.input-full:focus, 
.input-base:focus, 
.search-box input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 109, 167, 0.1);
  outline: none;
}

/* Form Layouts (for Modal) */
.form-row { display: flex; gap: 15px; margin-bottom: 15px; }
.form-group { flex: 1; display: flex; flex-direction: column; }
.form-group label {
    font-size: 0.85rem; font-weight: 600; color: var(--text-sub); margin-bottom: 5px;
}
.checkbox-row { align-items: center; margin-top: -10px; }


/* =========================================
   4. BOARD & LIST STYLES
   ========================================= */
.board-header-wrapper {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; flex-wrap: wrap; gap: 15px;
}
.board-title { font-size: var(--font-size-h2); margin: 0; color: var(--text-main); }
.board-controls { display: flex; gap: 10px; align-items: center; }

/* Search Box */
.search-box { position: relative; width: 250px; }
.search-box input { padding: 8px 12px 8px 35px; border-radius: 20px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; font-size: 0.9rem; }

/* List Table */
.board-container {
    width: 100%; background-color: #fff;
    border-top: 2px solid var(--color-primary);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.list-header {
    display: flex; background-color: #f8f9fa; border-bottom: 1px solid #ddd;
    padding: 15px 0; font-weight: 700; color: var(--text-main);
    font-size: 0.9rem; text-align: center;
}
.list-row {
    display: flex; border-bottom: 1px solid #eee; padding: 16px 0;
    transition: background-color 0.2s; cursor: pointer; align-items: center; background-color: #fff;
}
/* .list-row:hover { background-color: #f0f7ff; } */
/* [수정] 142~146행: 리스트 행 인터랙션 강화 */

.list-row:hover {
  background-color: #f8fbff;
  transform: translateX(6px); /* 우측 미세 이동으로 리듬감 부여 */
  box-shadow: var(--shadow-hover);
  border-left: 4px solid var(--color-primary); /* 좌측 강조 포인트 */
  z-index: 1;
}

.list-row.pinned {
    background-color: #fffde7; border-left: 4px solid var(--color-primary); font-weight: 500;
}

/* List Columns */
.col-num { width: 80px; text-align: center; color: var(--text-light); font-family: monospace; }
.col-title { 
    flex: 1; text-align: left; padding: 0 20px; font-weight: 500; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* .col-author { width: 140px; text-align: center; color: var(--text-sub); font-size: 0.9rem; }
.col-date { width: 120px; text-align: center; color: var(--text-light); font-size: 0.85rem; } */
.col-author { width: 120px; text-align: center; color: var(--text-sub); font-size: 0.9rem; }
.col-views  { width: 80px; text-align: center; color: var(--text-light); font-size: 0.85rem; }
.col-date   { width: 110px; text-align: center; color: var(--text-light); font-size: 0.85rem; }

/* List Badges & Icons */
.badge-new {
    display: inline-block; background-color: #ff4d4f; color: white;
    font-size: 0.7rem; font-weight: bold; padding: 2px 6px;
    border-radius: 4px; margin-left: 6px; vertical-align: middle; line-height: 1.2;
    animation: fadeIn 0.5s ease-in-out;
}
.icon-notice { color: #ff9800; margin-right: 8px; font-size: 0.95rem; }
.pin-icon { color: #e53935; margin-right: 6px; transform: rotate(45deg); display: inline-block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Home Card */
.home-card {
    background: #fff;
    padding: 30px 20px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--border-radius-card);
    transition: var(--transition-fluid);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.home-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}
.board-grid-home {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding-bottom: 50px;
}
.card-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 1.5rem;
    transition: var(--transition-fluid);
}
.home-card:hover .card-icon-wrapper {
    transform: scale(1.1) rotate(-5deg);
}
.card-title {
    font-size: 1.15rem;
    color: var(--text-main);
    margin-bottom: 12px;
    font-weight: 700;
}

.card-link-text {
    font-size: 0.85rem;
    color: #999;
    font-weight: 500;
}

.card-link-text i {
    font-size: 0.75rem;
    margin-left: 4px;
    transition: transform 0.2s;
}

.home-card:hover .card-link-text i {
    transform: translateX(4px);
}



/* =========================================
   5. MODAL STYLES
   ========================================= */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: center; z-index: 1000;
}
/* [수정] 178~180행: 모달 배경 유리 효과(Glassmorphism) 극대화 */
.modal-overlay {
  background: rgba(255, 255, 255, 0.7); /* 더 밝고 투명하게 */
  backdrop-filter: blur(12px) saturate(180%);
}

.hidden { display: none !important; }

.modal-content {
  background: #fff;
  width: 1100px; max-width: 95%; max-height: 90vh; height: auto;
  padding: 30px; border-radius: var(--border-radius-card);
  display: flex; flex-direction: column; overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  animation: modalSlideUp 0.3s ease-out forwards;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 25px; /* 간격 확대 (20px -> 25px) */
    padding-bottom: 15px; /* 하단 구분선 추가를 위한 패딩 */
    border-bottom: 2px solid #f0f0f0; /* 헤더와 본문 구분선 */
}
/* 헤더 제목 스타일 강화 */
#modal-title {
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    font-weight: 700;
}
/* Input 필드가 제목임을 명확히 하기 위한 스타일 */
#post-subject {
    font-size: 1.2rem; /* 글자 크기 확대 */
    font-weight: 600;
    padding: 15px;
    margin-bottom: 20px;
    border: 2px solid #eee; /* 테두리 조금 더 진하게 */
}

#post-subject:focus {
    border-color: var(--color-primary);
}

#post-subject::placeholder {
    color: #bbb;
    font-weight: 400;
}
.close-btn { background: none; border: none; font-size: 3rem; cursor: pointer; }
.modal-footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }


/* style.css - 상세 보기 읽기 전용 상태 최적화 */

/* [수정] 읽기 모드일 때 에디터 외형을 완전한 문서 형태로 변경 */
.is-view-mode .ql-toolbar { display: none !important; }
.is-view-mode .ql-container.ql-snow { 
    border: none !important; /* 상세 보기 시 에디터 테두리 제거 */
    padding: 0;
}
.is-view-mode .ql-editor {
    background-color: transparent; /* 배경색 제거하여 문서 일체감 부여 */
    padding: 10px 0;
    cursor: default;
    user-select: text; /* 텍스트 복사는 허용 */
    max-height: none !important;  /* [수정] 읽기 모드 시 에디터 높이 제한 해제 (이중 스크롤 방지) */
    overflow-y: visible !important;
}
/* 읽기 모드 시 포커스 아웃라인 제거 */
.is-view-mode .ql-editor:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Readonly 입력창 스타일 */
input[readonly] {
    background-color: #fcfcfc;
    border-color: #eee !important;
    cursor: default;
    box-shadow: none !important;
}




/* Comments & Editor */
#comments-section { margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; }
.comment-form { display: flex; gap: 10px; background: #f9f9f9; padding: 15px; margin-bottom: 20px; border-radius: 4px; }
.comment-form textarea { flex: 1; height: 50px; padding: 10px; border: 1px solid #ddd; resize: none; border-radius: 4px; font-family: inherit; font-size: 0.9rem; }
.comment-item { border-bottom: 1px solid #f1f1f1; padding: 10px 0; }
.comment-meta { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 5px; }
.comment-author { font-weight: bold; color: var(--color-primary); }
.comment-text { font-size: 0.95rem; color: #444; white-space: pre-wrap; }

.comment-meta { display: flex; justify-content: space-between; align-items: center; }
.comment-actions { display: flex; gap: 8px; }

/* 댓글 수정/삭제 텍스트 버튼 스타일 */
.comment-btn-edit, .comment-btn-delete {
    font-size: 0.75rem;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
}
.comment-btn-edit:hover { color: var(--color-primary); }
.comment-btn-delete:hover { color: #dc3545; }

/* 인라인 수정 폼 */
.comment-edit-form textarea {
    width: 100%;
    min-height: 60px;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 5px;
    resize: vertical;
}

.ql-container {
    height: auto !important; font-family: var(--font-family-base) !important;
    border-bottom-left-radius: var(--border-radius-base); border-bottom-right-radius: var(--border-radius-base);
}
.ql-editor { min-height: 300px; max-height: 60vh; overflow-y: auto; }
.ql-editor img { max-width: 100%; height: auto; }

/* Footer */
footer { text-align: center; padding: 30px 0; color: var(--text-light); font-size: 0.85rem; border-top: 1px solid #eee; margin-top: auto; }


/* =========================================
   6. LOGIN PAGE STYLES
   ========================================= */
.login-container { display: flex; min-height: 100vh; background-color: #fff; }

.login-brand {
    flex: 1;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: white; display: flex; flex-direction: column; justify-content: center;
    padding: 60px; position: relative; overflow: hidden;
}
.brand-content { position: relative; z-index: 2; max-width: 400px; margin: 0 auto; }
.brand-icon { font-size: 3rem; margin-bottom: 20px; opacity: 0.9; }
.login-brand h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.brand-slogan { font-size: 1.1rem; opacity: 0.9; line-height: 1.6; font-weight: 300; margin-bottom: 40px; }
.circle-deco {
    position: absolute; width: 400px; height: 400px; border-radius: 50%;
    background: rgba(255,255,255,0.1); top: -100px; right: -100px; z-index: 1;
}

.login-form-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; background-color: #fff; }
.form-box { width: 100%; max-width: 400px; }

.auth-tabs { display: flex; margin-bottom: 30px; border-bottom: 2px solid #eee; }
.auth-tabs button {
    flex: 1; padding: 12px; background: none; border: none; font-size: 1rem; font-weight: 600;
    color: #999; cursor: pointer; transition: all 0.2s;
}
.auth-tabs button.active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); margin-bottom: -2px; }

.form-title { font-size: 1.8rem; margin-bottom: 10px; color: var(--text-main); }
.form-desc { color: var(--text-light); margin-bottom: 30px; font-size: 0.95rem; }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; color: var(--text-main); }
.input-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; transition: border-color 0.2s; }
.input-group input:focus { border-color: var(--color-primary); outline: none; }

.btn-block { width: 100%; padding: 12px; font-size: 1rem; margin-bottom: 15px; }
.divider { text-align: center; margin: 20px 0; position: relative; }
.divider::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #eee; z-index: 1; }
.divider span { background: #fff; padding: 0 10px; color: #999; font-size: 0.85rem; position: relative; z-index: 2; }
.btn-google {
    width: 100%; padding: 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 0.95rem; font-weight: 500; color: #333; cursor: pointer; transition: background 0.2s;
}
.btn-google:hover { background-color: #f8f9fa; }
.btn-google img { width: 20px; height: 20px; }
.form-actions { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.link-sub { font-size: 0.85rem; color: var(--color-primary); text-decoration: none; }


/* =========================================
   7. ADMIN PAGE STYLES
   ========================================= */
.admin-table-container { width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 300px; }
.admin-table th, .admin-table td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; }
.admin-table th { background-color: #f8f9fa; color: var(--text-sub); font-weight: 600; }

/* 관리자 페이지 직책 배지 */
.badge-position {
    background-color: #f1f5f9;
    color: #475569;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

.role-select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    outline: none;
}
/* [신규] 등급별 고유 색상 (가독성 및 관리 실수 방지) */
.role-type-coordinator { border-color: #1a73e8; color: #1a73e8; background-color: #e8f0fe; }
.role-type-manager     { border-color: #34a853; color: #34a853; background-color: #e6f4ea; }
.role-type-elder       { border-color: #f9ab00; color: #f9ab00; background-color: #fef7e0; }
.role-type-user        { border-color: #dadce0; color: #5f6368; background-color: #fff; }

.role-select:focus {
    box-shadow: 0 0 0 3px rgba(74, 109, 167, 0.2);
}
.role-select.role-admin { border-color: var(--color-primary); color: var(--color-primary); font-weight: bold; background-color: #e8f0fe; }


/* =========================================
   8. FULLCALENDAR STYLES
   ========================================= */
#calendar {
    max-width: 100%; margin: 0 auto; background: #fff; padding: 20px;
    border-radius: var(--border-radius-card); box-shadow: var(--shadow-card); min-height: 600px;
}
.fc .fc-toolbar-title { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }
.fc .fc-button-primary { background-color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; }
.fc .fc-button-primary:hover, 
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--color-primary-dark); border-color: var(--color-primary-dark);
}

/* [수정] 상단 바 레이아웃 정렬 (Flexbox) - 날짜 우선, 좌측 정렬 */
.fc .fc-daygrid-day-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* 왼쪽 정렬 */
    padding: 4px 6px;
    gap: 8px; /* 요소 간 간격 */
}

/* 1. 날짜 숫자 (맨 왼쪽 배치) */
.fc-daygrid-day-number {
    order: 1;             /* 순서: 맨 처음 */
    margin-right: auto;   /* 오른쪽 여백을 최대로 -> 나머지 요소를 우측 끝으로 밀어냄 */
    margin-left: 0;       /* 왼쪽 여백 제거 */
    font-size: 0.95rem;
    font-weight: 600;
    z-index: 2;
    line-height: 1;
}

/* 2. 공휴일 이름 (날짜 바로 옆 배치) */
.holiday-name {
    order: 2;             /* 순서: 두 번째 */
    color: #e53935;       /* 빨간색 */
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;      /* 너무 길면 잘리게 */
    margin-top: 2px;      /* 시각적 높이 보정 */
}
.fc .fc-day-today { background-color: #fffde7 !important; }
.fc-day-sun .fc-col-header-cell-cushion { color: #e53935; }
.fc-day-sat .fc-col-header-cell-cushion { color: #1e88e5; }


/* 주말 색상 */
.fc-day-sun .fc-col-header-cell-cushion,
.fc-day-sun a.fc-daygrid-day-number { color: #e53935 !important; text-decoration: none; }
.fc-day-sat .fc-col-header-cell-cushion,
.fc-day-sat a.fc-daygrid-day-number { color: #1e88e5 !important; text-decoration: none; }



/* 공휴일 텍스트 이벤트 (이벤트 바 형태 제거 - 혹시 남아있을 경우 대비) */
.holiday-text { display: none !important; }

/* 2. 공휴일 스타일 */
/* 공휴일 텍스트 이벤트 (이벤트 바 형태 제거) */
.holiday-text {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #e53935 !important; /* 빨간 글씨 */
    font-size: 0.85rem;
    font-weight: bold;
    pointer-events: none; /* 클릭 방지 */
    margin-top: 2px;
}
.holiday-text .fc-event-main { color: #e53935 !important; }

/* 캘린더 커스텀 이벤트 레이아웃 (PC) */
.fc-event-custom-wrap {
    display: flex;
    flex-direction: column;
    padding: 2px 0;
    overflow: hidden;
}

.fc-event-title-row {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.fc-event-time-row {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 1px;
}

/* 3. 날씨 아이콘 (오른쪽 끝 배치) */
.weather-info {
    order: 3;             /* 순서: 맨 마지막 */
    display: flex; 
    align-items: center; 
    gap: 2px; 
    font-size: 0.75rem; 
    color: #555;
    background: rgba(255, 255, 255, 0.9); 
    padding: 2px 6px; 
    border-radius: 12px; 
    margin: 0;
    border: 1px solid #eee;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 오늘 날짜 강조 */
.fc .fc-day-today { 
    background-color: #fffde7 !important; /* 연한 노랑 */
}
.fc .fc-day-today .fc-daygrid-day-number {
    background-color: #ffd54f;
    color: #fff !important;
    padding: 2px 6px;
    border-radius: 12px;
}

/* Enhanced Event Style */
/* .fc-daygrid-event {
    background-color: var(--color-accent) !important;
    border: none !important;
    border-left: 3px solid var(--color-primary) !important;
    color: var(--color-primary-dark) !important;
    border-radius: 4px;
    padding: 3px 6px; margin: 2px 0; font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: transform 0.1s;
} */
/* 기존 스타일(615행 부근) 수정: 패딩 및 정렬 조정 */
.fc-daygrid-event {
    padding: 4px 8px !important;
    margin: 2px 4px !important;
}

.fc-daygrid-event:hover { transform: translateY(-1px); background-color: #dbeafe !important; }

/* Weather Icon Style */
.weather-info {
    display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: #666;
    background: rgba(245, 245, 245, 0.8); padding: 2px 6px; border-radius: 12px; margin-bottom: 2px;
}





/* 방문자 위젯 스타일 */
/* style.css - 방문자 위젯 가로형 리디자인 */
/* style.css - 방문자 위젯 가로형 리디자인 */
.visitor-widget {
    margin: 10px 0 20px 0;
    padding: 8px 18px;
    background: #ffffff;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    box-shadow: var(--shadow-card);
}

.visitor-info-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 15px;
    border-right: 1px solid #eee;
}

.total-value {
    font-weight: 800;
    color: var(--color-primary);
}

.visitor-chart-h {
    display: flex;
    flex-direction: column;
    gap: 6px; /* 간격 미세 조정 */
    padding-left: 15px;
    min-width: 140px; /* 숫자 공간 확보를 위해 너비 증가 */
}

.chart-item-h {
    display: flex;
    align-items: center;
    gap: 6px; /* 요소 간 간격 */
}

.chart-bar-h {
    height: 6px; 
    background: #e0e6ed;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-label-h { 
    font-size: 0.65rem; 
    color: #999; 
    width: 25px; /* 날짜 라벨 너비 고정 */
    font-weight: 600;
}

/* [신규] 막대 배경 (빈 공간 표시용 - 선택 사항) */
.chart-bar-bg {
    width: 60px; /* 막대 최대 너비 고정 */
    height: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    border-radius: 3px;
}

/* [신규] 방문자 수 숫자 스타일 */
.chart-count {
    font-size: 0.7rem;
    color: #555;
    font-weight: 600;
    min-width: 20px; /* 숫자 자리 확보 */
    text-align: right;
}



/* style.css - 하단 추가 */

.tab-btn.active { color: var(--color-primary); border-bottom: 2px solid var(--color-primary); }
.hidden { display: none !important; }

/* [수정] 673행 부근: 메뉴 열 고정 및 심미성 강화 */
#matrix-table { border-collapse: separate; border-spacing: 0; }
#matrix-table th, #matrix-table td { padding: 12px 8px; border-bottom: 1px solid #f0f0f0; }

#matrix-table td:first-child { 
    position: sticky; left: 0; background: #fff; z-index: 2; 
    box-shadow: 2px 0 5px rgba(0,0,0,0.02); min-width: 130px; 
}

/* [신규] 권한별 컬러 코딩 시스템 */
.perm-label-r { color: var(--color-primary); font-weight: 700; }
.perm-label-w { color: #e53935; font-weight: 700; }
.perm-label-c { color: #34a853; font-weight: 700; }

.perm-check { 
    width: 16px; height: 16px; cursor: pointer; vertical-align: middle; 
    accent-color: var(--color-primary); /* 기본 컬러 */
}
.perm-check[data-key$="_W"] { accent-color: #e53935; }
.perm-check[data-key$="_C"] { accent-color: #34a853; }

#matrix-table tr:hover td { background-color: #f8fbff; }

.master-check {
    width: 14px;
    height: 14px;
    accent-color: var(--color-primary);
    vertical-align: middle;
}

#matrix-table th {
    vertical-align: top;
    padding: 15px 5px;
    background-color: #fcfcfc;
}

.mobile-role-label { display: none; } /* 기본 PC 뷰에서는 숨김 */

/* #matrix-table label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 0.8rem; } */

/* 모바일 매트릭스 대응 (가로 스크롤) */
@media (max-width: 1024px) {
    /* .admin-table-container { -webkit-overflow-scrolling: touch; } */
}



/* 1. 기존 .role-badge 속성 보강 */
.role-badge {
    position: relative; /* 툴팁의 기준점 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0;
    cursor: help;
}

/* 2. 툴팁 본체 (가상 요소) */
.role-badge::after {
    content: attr(data-title); /* HTML의 data-title 속성값을 가져옴 */
    position: absolute;
    bottom: 125%; /* 배지 위로 띄움 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    
    /* 디자인 */
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap; /* 줄바꿈 방지 */
    letter-spacing: 0;
    text-transform: none;
    
    /* 애니메이션 준비 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* 마우스 간섭 방지 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 100;
}

/* 3. 툴팁 화살표 */
.role-badge::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

/* 4. 호버 시 노출 */
.role-badge:hover::after,
.role-badge:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* style.css - 비밀글 행 스타일 */
.row-masked {
    background-color: #fafafa !important;
    cursor: not-allowed !important;
}
.row-masked:hover {
    transform: none !important;
    border-left: none !important;
    box-shadow: none !important;
}



/* maintenance.css 수정본 (기존 파일 대체 또는 style.css 하단 추가) */

/* :root 변수는 style.css와 충돌 가능성이 있으므로 제거하고 var(--primary) 등 기존 변수 활용 권장 
   단, chip 관련 변수는 없으므로 유지 */
:root {
    --chip-bg: #dbeafe;
    --chip-text: #1e40af;
}

/* body 스타일 제거 -> 메인 레이아웃 상속 */

/* .container 제거 -> .maintenance-view로 변경하여 격리 */
.maintenance-view {
    max-width: 100%; /* 기존 컨테이너에 맞춤 */
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

/* 하위 스타일들은 .maintenance-view 내부에서만 동작하도록 수정 */
.maintenance-view header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f2f5;
}

.maintenance-view .controls {
    display: flex;
    gap: 10px;
}

.maintenance-view select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

/* 기존 primary-btn 스타일이 style.css에 있다면 제거, 없다면 유지하되 클래스명 충돌 주의 */
.maintenance-view .local-btn {
    background-color: var(--color-primary); /* app.js의 변수 활용 */
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.maintenance-view table {
    width: 100%;
    border-collapse: collapse;
}

.maintenance-view th {
    background-color: #f1f5f9;
    padding: 12px;
    text-align: left;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
}

.maintenance-view td {
    padding: 12px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

.maintenance-view .cycle-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

.maintenance-view .chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid #e2e8f0;
    padding: 6px;
    border-radius: 6px;
    min-height: 40px;
    background-color: white;
}

.maintenance-view .chip {
    background-color: var(--chip-bg);
    color: var(--chip-text);
    padding: 4px 10px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

.maintenance-view .chip .close {
    margin-left: 6px;
    cursor: pointer;
    color: #ef4444;
}

.maintenance-view .chip-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 100px;
    padding: 4px;
    font-size: 14px;
}

.maintenance-view .summary-section {
    margin-top: 30px;
    padding: 20px;
    background: #eff6ff;
    border-radius: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    font-weight: 600;
}



/* style.css 하단 추가 */

/* --- 유지보수 이력 페이지 추가 스타일 --- */

/* 특기사항 영역 */
.note-section {
    margin-top: 30px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
}

.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.note-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-main);
}

.note-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    box-sizing: border-box; /* 패딩 포함 */
}


/* --- 유지보수 댓글 (메인 게시판 디자인 통일) --- */
.maintenance-comments {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.maintenance-comments h3 {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
    font-weight: 700;
}

.m-comment-list {
    margin-bottom: 20px;
}

.m-comment-item {
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
    background: transparent; /* 배경색 제거 (메인 게시판 느낌) */
}

/* 헤더: 배지+이름+날짜 (좌측), 버튼 (우측) */
.m-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.m-profile-area {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.m-comment-author {
    font-weight: 600;
    color: #333;
}

.m-comment-date {
    font-size: 0.8rem;
    color: #888;
    margin-left: 4px;
}

/* 배지 스타일 (app.js와 동일) */
.role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
}

/* 수정/삭제 버튼 영역 */
.m-comment-actions {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
}

.m-btn-text {
    cursor: pointer;
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.m-btn-text:hover {
    text-decoration: underline;
    color: #555;
}

/* 본문 텍스트 */
.m-comment-body {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    padding-left: 2px; /* 시각적 정렬 보정 */
}

/* 입력폼 */
.m-comment-form {
    display: flex;
    gap: 10px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.m-comment-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.m-comment-input:focus {
    border-color: var(--color-primary);
}


/* --- [신규] 공감/비공감 반응 버튼 스타일 --- */

#reaction-section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #f0f0f0;
}

.reaction-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 24px;
    border: 1.5px solid #e0e0e0;
    background: #fafafa;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: #888;
    transition: all 0.2s ease;
}

.reaction-btn:hover {
    border-color: #bbb;
    background: #f0f0f0;
}

.reaction-btn i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.reaction-btn:hover i {
    transform: scale(1.15);
}

/* 좋아요 활성 상태 */
.reaction-btn.reaction-like.active {
    border-color: #1a73e8;
    background: #e8f0fe;
    color: #1a73e8;
}

.reaction-btn.reaction-like.active i {
    color: #1a73e8;
}

/* 싫어요 활성 상태 */
.reaction-btn.reaction-dislike.active {
    border-color: #e53935;
    background: #fdecea;
    color: #e53935;
}

.reaction-btn.reaction-dislike.active i {
    color: #e53935;
}

/* 반응 카운트 숫자 */
.reaction-btn span {
    min-width: 16px;
    text-align: center;
}

/* style.css 하단에 추가 */

/* --- [신규] 읽기 전용 모드 스타일 (UX 개선) --- */

/* 1. 칩(Chip) 읽기 전용 스타일 */
.chip.readonly {
    padding-right: 12px; /* 삭제 버튼 공간 제거 */
    background-color: #f1f5f9; /* 조금 더 짙은 회색으로 변경하여 수정 불가 암시 */
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* 2. 비활성화된 Textarea 및 Input 시각화 강화 */
textarea:disabled, 
input:disabled {
    background-color: #f8fafc !important; /* 배경색 변경 */
    color: #64748b !important; /* 텍스트 색상 연하게 */
    border-color: #e2e8f0 !important;
    cursor: not-allowed;
    box-shadow: none;
}

/* 3. 테이블 내 버튼이 없을 때의 높이 보정 */
td {
    height: 50px; /* 버튼 유무와 관계없이 행 높이 일정하게 유지 */
}

/* 4. 작업자 명단 컨테이너가 비었을 때 (입력창도 없을 때) */
.chip-container:empty::before {
    content: "배정된 인원 없음";
    color: #94a3b8;
    font-size: 0.85rem;
    padding: 4px;
}




/* --- [신규] 상단 운영위원 입력 섹션 --- */
.committee-section {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px; /* 테이블과의 간격 */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.committee-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.committee-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #334155;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 칩 컨테이너 배경색 미세 조정 (카드 내부임으로 흰색 처리) */
.committee-section .chip-container {
    background-color: #fff;
    border-color: #cbd5e1;
}

/* [신규] 운영위원 전용 칩 스타일 (시각적 구분) */
.chip.committee-chip {
    background-color: #e0e7ff; /* 옅은 인디고/파랑 배경 */
    color: #3730a3;            /* 짙은 파랑 텍스트 */
    border: 1px solid #c7d2fe;
}

.chip.committee-chip .close {
    color: #4338ca; /* 닫기 버튼도 톤앤매너 맞춤 */
}

.chip.committee-chip i {
    margin-right: 4px;
    font-size: 0.85em;
    opacity: 0.8;
}


/* 특기사항 뷰 모드 (텍스트만 보임) */
.note-view-mode {
    padding: 15px;
    background: #f9fafb;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    min-height: 100px;
    white-space: pre-wrap; /* 줄바꿈 유지 */
    color: #334155;
    line-height: 1.6;
}

/* 버튼 그룹 (수정/저장/취소) */
.note-actions {
    display: flex;
    gap: 8px;
}

/* 숨김 클래스 */
.hidden-force {
    display: none !important;
}

/* 인원수 요약 섹션 스타일 개선 */
.summary-section {
    background-color: #eff6ff;
    border: 1px solid #dbeafe;
    color: #1e3a8a;
    font-size: 0.95rem;
    justify-content: space-between; /* 좌우 배분 */
    align-items: center;
}

/* 1. 행별 저장 버튼: 평소엔 은은하게, 호버 시 강조 (Outline Style) */
.table-btn-save {
    background-color: transparent;
    border: 1px solid #cbd5e1;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.table-btn-save:hover {
    background-color: var(--color-primary); /* #2563eb */
    border-color: var(--color-primary);
    color: white;
}

/* 2. 특기사항 뷰 모드: 불필요한 공백 제거를 위해 패딩 조정 */
.note-view-mode {
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    min-height: 80px;
    white-space: pre-wrap;
    color: #334155;
    line-height: 1.6;
    font-size: 0.95rem;
    
    /* [중요] 좌측 정렬 강제 */
    text-align: left !important; 
    
    /* [중요] 불필요한 들여쓰기 제거 */
    text-indent: 0 !important; 
}

/* 3. 총계 섹션 강조 */
.summary-section {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.summary-text-group {
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 0.95rem;
}

.summary-highlight {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.1rem;
}



/* style.css 하단 추가 */

/* --- 특기사항 수정 이력 스타일 --- */
.note-history-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.85rem;
    color: #64748b;
}

.note-history-title {
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #94a3b8;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 150px; /* 너무 길어지면 스크롤 */
    overflow-y: auto;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid #f8fafc;
}

.history-desc {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-weight: 500;
}

.history-icon {
    font-size: 0.8rem;
    width: 16px;
    text-align: center;
}

.history-badge {
    background-color: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.history-time {
    color: #94a3b8;
    font-size: 0.75rem;
}

/* 타입별 색상 */
.history-type-note { color: #f59e0b; }      /* Amber */
.history-type-committee { color: #3b82f6; } /* Blue */
.history-type-task { color: #10b981; }      /* Emerald */

/* style.css 하단 */

/* 히스토리 토글 버튼 스타일 */
.btn-history-toggle {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    transition: color 0.2s;
}

.btn-history-toggle:hover {
    color: #475569;
}

.note-history-wrapper {
    margin-top: 10px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 5px;
}




/* [UX] 저장되지 않은 변경사항이 있을 때의 버튼 스타일 (Amber Color) */
.btn-dirty {
    background-color: #f59e0b !important; /* 주황/황색 */
    color: white !important;
    border: 1px solid #d97706 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    animation: pulse-soft 2s infinite; /* 시선 유도 */
}

.btn-dirty:hover {
    background-color: #d97706 !important;
}

@keyframes pulse-soft {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}


/* [신규] 유지보수 기간 타이틀 (헤더 좌측 강조) */
.maintenance-period-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b; /* 가독성 높은 짙은 색 */
    margin: 0;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.maintenance-period-title i {
    color: var(--color-primary); /* 아이콘 포인트 컬러 */
    font-size: 1.5rem;
}

.export-controls i {
    font-size: 0.8rem;
}


/* --- 내보내기(Export) 버튼 그룹 --- */
.export-controls {
    display: flex;
    gap: 8px;
    margin-left: 10px;
}

.btn-export {
    background: white;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-export:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #94a3b8;
}

/* --- [중요] 내보내기 모드일 때 숨길 요소들 --- */
body.exporting .controls,          /* 상단 조회 컨트롤 (연도/월 선택) */
body.exporting .export-controls,   /* [신규] 내보내기 버튼들 (XLS, IMG, PDF) 숨김 추가 */
body.exporting .table-btn-save,    /* 저장 버튼 */
body.exporting .chip-input,        /* 칩 입력창 */
body.exporting .close,             /* 칩 삭제(x) 버튼 */
body.exporting .note-actions,      /* 특기사항 버튼들 */
body.exporting .btn-history-toggle,/* 히스토리 토글 버튼 */
body.exporting .m-comment-form,    /* 댓글 입력창 */
body.exporting .m-comment-actions, /* 댓글 삭제 버튼 */
body.exporting #btn-save-committee,/* 운영위원 저장 버튼 */
body.exporting .maintenance-view th:nth-child(6), /* 저장 컬럼 헤더 */
body.exporting .maintenance-view td:nth-child(6), /* 저장 컬럼 데이터 */
body.exporting .note-history-section,
body.exporting .note-history-wrapper,
body.exporting .activity-input-group, /* 활동 일시 입력창 */
body.exporting .btn-activity-save     /* 활동 일시 저장 버튼 */
{
    display: none !important;
}


/* 2. [작업자 명단] 컬럼(5번째) 확장 */
/* 우측 저장 컬럼이 사라진 공간을 작업자 명단이 채우도록 설정 */
body.exporting .maintenance-view th:nth-child(5),
body.exporting .maintenance-view td:nth-child(5) {
    /* 테이블 레이아웃 특성상 내용이 많은 컬럼이 자동으로 늘어나지만,
       확실한 확장을 위해 width 제어를 해제하거나 auto로 설정 */
    width: auto !important; 
    display: table-cell !important; /* 혹시 모를 flex 변환 방지 */
}

/* 3. 칩 컨테이너(Chip Container) 꽉 채우기 */
/* td가 넓어져도 내부 div가 안 늘어날 경우를 대비해 width 100% 명시 */
body.exporting .maintenance-view .chip-container {
    width: 100% !important;
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
    border: none !important; /* (선택사항) 내보내기 시 테두리 제거로 더 깔끔하게 */
}


.activity-time-section {
    background-color: #fff;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.activity-label {
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
}


.activity-input-group {font-size: 14px;}

/* 1. 모든 내부 요소 공통 스타일 (높이 통일, 기본 디자인) */
.activity-input-group > input,
.activity-input-group > select,
.activity-input-group > button {
  height: 38px; /* div.controls와 유사한 높이로 설정 (필요시 수정) */
  padding: 0 12px;
  font-size: 13px;
  font-family:Arial, Helvetica, sans-serif; 
  border: 1px solid #ddd; /* 은은한 테두리 */
  border-radius: 4px; /* 부드러운 모서리 */
  box-sizing: border-box; /* 테두리 포함 크기 계산 */
  outline: none; /* 포커스 시 기본 테두리 제거 */
  transition: all 0.2s ease;
}

/* 2. 입력창(Input, Select) 전용 스타일 */
.activity-input-group > input,
.activity-input-group > select {
  background-color: #fff;
  color: #333;
  /* 모바일/데스크탑 공통: 공간이 남으면 조금 늘어나 보기 좋게 함 */
  flex: 1 1 auto; 
  min-width: 120px; /* 너무 작아지지 않도록 최소 폭 방어 */
}

/* 포커스 효과 (선택 시 강조) */
.activity-input-group > input:focus,
.activity-input-group > select:focus {
  border-color: #4a90e2; /* 브랜드 컬러에 맞게 변경 가능 */
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* 3. 버튼(Button) 전용 스타일 */
.activity-input-group > button {
  cursor: pointer;
  font-weight: 600;
  background-color: #f5f5f5; /* 기본 버튼 배경색 */
  color: #333;
  flex: 0 0 auto; /* 버튼은 내용 크기만큼만 차지하고 늘어나지 않음 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.activity-input-group > button:hover {
  background-color: #e0e0e0; /* 호버 시 약간 어둡게 */
}



/* 텍스트 뷰 (내보내기용) - 평소에는 숨김 */
.activity-text-view {
    display: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
    padding-left: 5px;
}

/* --- [중요] 내보내기(Export) 모드일 때 전환 로직 --- */
body.exporting .activity-input-group,
body.exporting .btn-activity-save {
    display: none !important; /* 입력창과 버튼 숨김 */
}

body.exporting .activity-text-view {
    display: inline-block !important; /* 텍스트만 표시 */
}

body.exporting .activity-time-section {
    border: none; /* 테두리 제거 */
    padding: 0 0 15px 0; /* 여백 조정 */
    margin-bottom: 10px;
}

/* 활동 일시 저장 버튼 - 저장 완료(수정 대기) 상태 */
.btn-activity-save.saved {
    background-color: #94a3b8 !important; /* 회색 (Disabled 느낌) */
    border-color: #cbd5e1 !important;
    color: #fff !important;
}

.btn-activity-save.saved:hover {
    background-color: #64748b !important; /* 호버 시 약간 진하게 */
}




.btn-history-delete {
    display: inline-flex !important; /* 강제 표시 */
    align-items: center;
    justify-content: center;
    margin-left: auto; /* 우측 끝으로 밀기 */
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-history-delete:hover {
    color: #ef4444; /* Hover 시 빨간색 */
    background-color: #fee2e2;
}

/* 아이콘 크기 보정 */
.btn-history-delete i {
    pointer-events: none; /* 아이콘 클릭 방지 (버튼만 클릭되게) */
}

/* 내보내기 시 특기사항 입력창(textarea) 대신 텍스트만 보이게 처리 */
body.exporting .note-textarea {
    display: none !important;
}
body.exporting #note-view {
    display: block !important;
    border: none;
    padding: 0;
}

/* 내보내기 시 레이아웃 보정 */
body.exporting .maintenance-view {
    box-shadow: none; /* 그림자 제거 */
    border: none;
    background: white;
    max-width: 1200px; /* PC 너비 강제 (모바일에서 찍어도 PC처럼) */
    margin: 0 auto;
}



/* 1. 배지 공통 스타일 */
.purchase-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    margin-right: 8px;
    text-align: center;
    min-width: 64px;
    vertical-align: middle;
    line-height: 1.2;
    border: 1px solid transparent;
    box-sizing: border-box;
}

/* 2. 관리자용 Select 커스텀 (배지처럼 보이게 위장) */
select.purchase-badge {
    cursor: pointer;
    appearance: none;        /* 네이티브 화살표 제거 (Chrome/Safari) */
    -webkit-appearance: none; 
    -moz-appearance: none;
    text-align-last: center; /* 텍스트 중앙 정렬 */
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

select.purchase-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    opacity: 0.95;
}

select.purchase-badge:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

/* 3. 상태별 컬러 코딩 (Semantic Colors) */
.status-pending    { background-color: #64748b; border-color: #475569; } /* 접수대기 (Slate) */
.status-reviewing  { background-color: #f59e0b; border-color: #d97706; } /* 검토중 (Amber) */
.status-approved   { background-color: #3b82f6; border-color: #2563eb; } /* 구매승인 (Blue) */
.status-purchasing { background-color: #8b5cf6; border-color: #7c3aed; } /* 배송중 (Violet) */
.status-completed  { background-color: #10b981; border-color: #059669; } /* 구매완료 (Emerald) */
.status-stock      { background-color: #06b6d4; border-color: #0891b2; } /* 재고사용 (Cyan) */
.status-rejected   { background-color: #ef4444; border-color: #dc2626; } /* 반려 (Red) */

/* 4. 완료된 게시글 스타일 (흐리게 처리) */
.row-dimmed .col-title {
    color: #94a3b8;
    text-decoration: line-through; /* 취소선 효과 */
}
.row-dimmed .col-title a {
    color: #94a3b8;
}
.row-dimmed .col-title .badge-new {
    display: none; /* 완료된 건은 NEW 뱃지 숨김 */
}


/* style.css 하단 추가 - 유지보수 상태 컬러 */
/* 기존 purchase-req와 공유 가능한 색상은 그대로 사용 */
/* .status-pending, .status-rejected, .status-completed 는 기존 것 사용 */

.status-inspecting  { background-color: #f59e0b; border-color: #d97706; } /* 검토중 (Amber) */
.status-scheduled   { background-color: #3b82f6; border-color: #2563eb; } /* 작업예정 (Blue) */
.status-in_progress { background-color: #8b5cf6; border-color: #7c3aed; } /* 작업중 (Violet) */
.status-hold        { background-color: #06b6d4; border-color: #0891b2; } /* 보류 (Cyan) */
.status-resolved    { background-color: #10b981; border-color: #059669; } /* 조치완료 (Emerald) */

/* style.css - 제품 설명서 전용 카테고리 컬러 */
.status-elec     { background-color: #3b82f6; border-color: #2563eb; } /* 전기/조명 (Blue) */
.status-sound    { background-color: #8b5cf6; border-color: #7c3aed; } /* 음향/영상 (Violet) */
.status-facility { background-color: #10b981; border-color: #059669; } /* 시설/건축 (Emerald) */
.status-general  { background-color: #64748b; border-color: #475569; } /* 일반/기타 (Slate) */

.brand-footer a {
    color: inherit; /* 부모 텍스트 색상 상속 */
    text-decoration: none; /* 밑줄 제거 */
    font-weight: bold; /* (선택사항) 굵게 표시 */
}

.brand-footer a:hover {
    text-decoration: underline; /* 마우스 올렸을 때만 밑줄 */
}


/* =========================================
   유지보수 이력 목록 전용 스타일
   ========================================= */

/* 목록 컨테이너 (board-container 위에 덮어쓰기) */
.ml-container {
    width: 100%;
    background-color: #fff;
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* 헤더 행 */
.ml-header {
    display: flex;
    background: linear-gradient(135deg, #f8fafb 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
    padding: 14px 0;
    font-weight: 700;
    color: var(--text-sub);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* 데이터 행 */
.ml-row {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #fff;
}
.ml-row:last-child {
    border-bottom: none;
}
.ml-row:hover {
    background-color: #f8fbff;
    transform: translateX(4px);
    box-shadow: inset 4px 0 0 0 var(--color-primary);
}

/* 컬럼 정의 */
.ml-col-title {
    flex: 1;
    padding: 0 20px;
    min-width: 0; /* flex 자식 overflow 허용 */
}
.ml-col-activity {
    width: 200px;
    text-align: center;
    padding: 0 10px;
    font-size: 0.88rem;
    color: var(--text-sub);
}
.ml-col-author {
    width: 100px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-sub);
}
.ml-col-participants {
    width: 100px;
    text-align: center;
    font-size: 0.88rem;
}
.ml-col-views {
    width: 80px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* 제목 영역 스타일 */
.ml-title-text {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}
.ml-row:hover .ml-title-text {
    color: var(--color-primary);
}

/* 제목 아래 서브 라벨 (연-월 뱃지) */
.ml-title-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.ml-month-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}
.ml-month-badge i {
    font-size: 0.65rem;
}

/* 활동일시 표시 */
.ml-activity-date {
    font-weight: 500;
    color: var(--text-main);
    font-size: 0.85rem;
    white-space: nowrap;
}
.ml-activity-time {
    display: block;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 2px;
}

/* 참석인원 뱃지 */
.ml-participant-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #f0f4ff;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 4px 10px;
    border-radius: 12px;
}
.ml-participant-badge i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* 조회수 */
.ml-views-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-light);
    font-size: 0.82rem;
    font-family: monospace;
}
.ml-views-text i {
    font-size: 0.7rem;
    opacity: 0.6;
}

/* 빈 상태 */
.ml-empty {
    padding: 60px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.95rem;
}
.ml-empty i {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 15px;
    opacity: 0.4;
}

/* 헤더 타이틀 아이콘 */
.ml-board-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: rgba(0, 137, 123, 0.1);
    color: #00897b;
    font-size: 1rem;
    margin-right: 10px;
}



.safety-item-row:hover {
    background-color: #fafafa;
}

.safety-item-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}



/* 1. 기본 인쇄 모드 컨테이너 설정 */
.safety-view-wrapper.printing-mode {
    box-shadow: none !important;
    border: none !important;
    /* A4 너비 고정 (약 210mm) */
    width: 210mm !important;
    max-width: 210mm !important;
    /* 상하좌우 여백 최소화 */
    padding: 10mm !important;
    margin: 0 !important;
    background-color: white !important;
    color: #000 !important;
}

/* 2. 헤더 및 푸터 표시 */
.safety-view-wrapper.printing-mode .print-header,
.safety-view-wrapper.printing-mode .print-footer {
    display: block !important;
}

/* 3. 상단 메타 정보(월, 일자, 점검자) 압축 */
/* html2canvas는 CSS Grid 렌더링에 문제가 있으므로 flexbox로 전환 */
.safety-view-wrapper.printing-mode .safety-meta-grid {
    display: flex !important;
    flex-direction: row !important;
    background: transparent !important;
    border: 1px solid #000 !important;
    border-radius: 4px !important;
    padding: 8px !important;
    margin-bottom: 10px !important;
    gap: 10px !important;
}
.safety-view-wrapper.printing-mode .safety-meta-grid > .form-group {
    flex: 1 !important;
}
.safety-view-wrapper.printing-mode .safety-meta-grid label {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    color: #000 !important;
}
.safety-view-wrapper.printing-mode .safety-meta-grid input {
    font-size: 12px !important;
    height: auto !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #999 !important;
    border-radius: 0 !important;
    padding: 4px 0 !important;
}

/* 4. 체크리스트 항목 초슬림화 (핵심) */
.safety-view-wrapper.printing-mode .safety-category-group {
    border: 1px solid #000 !important;
    margin-bottom: 8px !important; /* 그룹 간 간격 축소 */
    border-radius: 4px !important;
}

.safety-view-wrapper.printing-mode .safety-cat-header {
    background-color: #eee !important;
    color: #000 !important;
    border-bottom: 1px solid #000 !important;
    padding: 4px 8px !important; /* 헤더 패딩 축소 */
    font-size: 11px !important;  /* 헤더 폰트 축소 */
    font-weight: 800 !important;
}

.safety-view-wrapper.printing-mode .safety-items-list {
    padding: 0 !important;
}

.safety-view-wrapper.printing-mode .safety-item-row {
    padding: 3px 8px !important; /* 항목 행 높이 대폭 축소 */
    border-bottom: 1px solid #ddd !important;
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
}

.safety-view-wrapper.printing-mode .safety-item-row:last-child {
    border-bottom: none !important;
}

.safety-view-wrapper.printing-mode .safety-chk {
    width: 12px !important;  /* 체크박스 크기 축소 */
    height: 12px !important;
    margin-top: 2px !important;
}

.safety-view-wrapper.printing-mode .safety-item-row span {
    font-size: 9px !important; /* 항목 텍스트 9px로 축소 (A4 한 장 맞춤용) */
    line-height: 1.2 !important;
    margin-left: 5px !important;
    color: #000 !important;
}

/* 5. 비고란 압축 */
.safety-view-wrapper.printing-mode .remarks-section {
    margin-top: 10px !important;
    padding-top: 5px !important;
    border-top: 1px solid #000 !important;
}
.safety-view-wrapper.printing-mode .remarks-section h3 {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    color: #000 !important;
}
.safety-view-wrapper.printing-mode textarea {
    font-size: 10px !important;
    line-height: 1.4 !important;
    height: 60px !important; /* 높이 강제 고정 */
    overflow: hidden !important;
    padding: 5px !important;
    border: 1px solid #ccc !important;
}






/* ==========================================================================
   9. MOBILE RESPONSIVE INTEGRATION (Unified Media Queries)
   Warning: 모든 모바일 스타일은 이곳에서 관리합니다.
   ========================================================================== */

@media (max-width: 900px) {
    /* 헤더 태블릿/모바일 대응 */
    .nav-menu { display: none; } 
    .header-content { padding: 0 15px; justify-content: space-between; }


    /* [수정] 모바일 아이콘 교차 (CSS 우선순위 강화) */
    .logo span { display: none; }       /* 텍스트 숨김 */
    
    .logo .logo-icon-pc { display: none; }    /* 스패너 숨김 (우선순위 높임) */
    .logo .logo-icon-mobile { display: inline-block; } /* 집 아이콘 보임 */
    
    .logo i { font-size: 1.8rem; }      /* 아이콘 크기 조정 */


    .user-actions { gap: 8px; }
    .user-badge { padding: 4px 8px; font-size: 0.8rem; }
    #btn-admin-page { padding: 6px 10px; font-size: 0.8rem; margin: 0; }
}



@media (max-width: 768px) {
    /* 1. 레이아웃 & 폰트 */
    .container { padding: 0 15px; }
    :root { --font-size-base: 14px; }

    /* 2. 게시판 리스트 (Card View 변환) */
    .list-header { display: none; }
    /* .list-row { flex-direction: column; align-items: flex-start; padding: 15px; gap: 8px; } */
    .list-row {
        display: flex;
        flex-wrap: wrap;       /* 중요: 내부 요소들이 줄 바꿈 할 수 있도록 설정 */
        align-items: center;   /* 세로 중앙 정렬 */
        justify-content: flex-start;
        padding: 15px;
        gap: 8px;              /* 요소 사이 간격 */
    }

    .list-row > .col-title  { 
        flex-basis: 100%;      /* 가로폭을 강제로 100% 차지하게 함 */
        width: 100%;           /* flex-basis와 함께 사용하여 확실하게 줄바꿈 유도 */
        margin-bottom: 8px;    /* 제목과 아래 정보(작성자 등) 사이의 여백 */
        
        /* 긴 제목 줄바꿈 처리 */
        white-space: normal;   
        word-break: keep-all;  /* 단어 단위로 끊어 읽기 편하게 함 */
        line-height: 1.4;      /* 가독성을 위한 줄 간격 */
        }
    /* (선택 사항) 작성자, 조회수, 날짜 등 나머지 요소들 */
    /* 별도 수정 없어도 flex-wrap 덕분에 제목 아래 한 줄로 나열됩니다. */
    .list-row > .col-author {margin-left: 20px; width: 100px;}
    .list-row > .col-author,
    .list-row > .col-views, 
    .list-row > .col-date {
        font-size: 0.9em;      /* 정보성 텍스트는 조금 작게 */
        color: #666;           /* 회색 톤으로 구분 */
        /* 필요하다면 margin-right 등을 추가 */
        }
    .col-num { display: none; }
    /* .col-title { width: 100%; font-size: 1.05rem; padding: 0; margin: 0; white-space: normal; } */

    /* .col-author, .col-date { display: inline-block; width: auto; font-size: 0.85rem; color: #888; margin-right: 10px; } */
    .col-views { display: inline-block; width: auto; font-size: 0.85rem; color: #999; margin-right: 10px; }
    .col-views::before { content: "\f06e"; font-family: "Font Awesome 6 Free"; font-weight: 400; margin-right: 4px; }


    /* 3. 게시판 헤더 및 검색창 */
    .board-header-wrapper { flex-direction: column; align-items: flex-start; gap: 15px; }
    .board-controls { width: 100%; flex-direction: column-reverse; gap: 10px; }
    .search-box { width: 100%; }
    .search-box input { height: 44px; }
    #btn-write { width: 100%; height: 44px; }

    /* 4. 모달 (Full Screen & Bottom Sheet 느낌) */
    .modal-content {
        width: 100% !important;      /* 강제 100% 너비 */
        max-width: 100% !important;  /* [핵심] 글로벌 설정(95%)을 덮어씌워 제한 해제 */
        height: 100%;                /* 전체 높이 */
        max-height: 100vh;           /* 화면 꽉 채우기 */
        margin: 0;                   /* 외부 여백 제거 */
        border-radius: 0;            /* 둥근 모서리 제거 */
        padding: 20px;               /* 내부 여백 유지 */
        overflow-y: auto;            /* 내용 길면 스크롤 */
    }
    .modal-footer { flex-direction: column; gap: 10px; }
    .modal-footer button { width: 100%; height: 48px; }
    
    /* 5. 폼 입력 필드 (세로 배치) */
    .form-row { flex-direction: column; gap: 15px; }
    .input-base, .input-full { padding: 14px; }

    /* 6. Quill 에디터 툴바 */
    .ql-toolbar button { width: 32px !important; height: 32px !important; margin: 2px !important; }
    .ql-container { font-size: 16px !important; }
    .ql-toolbar { position: sticky; top: 0; z-index: 10; background-color: #fff; border-bottom: 1px solid #ccc; }

    /* 7. FullCalendar (모바일 최적화) */
    #calendar { padding: 10px; }
    .fc .fc-toolbar { flex-direction: column; gap: 10px; }
    .fc-toolbar-title { font-size: 1.25rem; }
    .weather-info span:last-child { display: none; }

    /* 모바일 한 줄 레이아웃 대응 */
    .fc-content-mobile {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* 8. 로그인 페이지 (세로 배치) */
    .login-container { flex-direction: column; }
    .login-brand { padding: 40px 20px; text-align: center; }
    .circle-deco { width: 150px; height: 150px; }
    .login-form-wrapper { padding: 30px 20px; }

    /* style.css - 로그인 환영 이미지 전용 스타일 */

    .welcome-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px; /* 타이틀과의 간격 */
        animation: fadeInUp 0.8s ease-out; /* 부드러운 등장 효과 */
    }

    .welcome-character {
        width: auto;
        max-width: 180px; /* 전문가 권장 크기: 150px~200px 사이 */
        height: auto;
        display: block;
        /* 이미지 주변의 불필요한 공백 제거 및 선명도 확보 */
        /* filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); */
    }

    /* 등장 애니메이션 정의 */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 모바일 최적화 */
    @media (max-width: 768px) {
        .welcome-character {
            max-width: 140px; /* 모바일에서는 약간 작게 조정 */
        }
        .welcome-image-container {
            margin-bottom: 15px;
        }
    }




    /* 9. 관리자 테이블 (Card View) - [수정됨] */
    .admin-table thead { display: none; }
    
    .admin-table tr { 
        display: block; 
        margin-bottom: 20px; 
        background: #fff;
        border: 1px solid #e1e4e8; 
        border-radius: 12px; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
        padding: 0; /* 패딩 제거 (내부 셀에서 처리) */
        overflow: hidden; /* 모서리 둥글게 유지 */
    }

    /* 공통 셀 스타일 (Grid Layout 적용) */
    .admin-table td { 
        display: grid; 
        grid-template-columns: 90px 1fr; /* 라벨 고정 90px, 나머지 데이터 */
        gap: 15px; /* 라벨과 데이터 사이 간격 좁힘 */
        text-align: left; /* 우측 정렬 -> 좌측 정렬 변경 */
        padding: 12px 20px; 
        border-bottom: 1px solid #f1f1f1;
        align-items: center; /* 세로 중앙 정렬 */
    }

    .admin-table td:last-child { border-bottom: none; }

    /* 라벨 (::before) 스타일 */
    .admin-table td::before { 
        content: attr(data-label); 
        font-weight: 600; 
        color: #888;
        font-size: 0.9rem;
    }

    /* 데이터 텍스트 줄바꿈 처리 */
    .admin-table td {
        word-break: break-all; /* 긴 이메일 강제 줄바꿈 */
        line-height: 1.4;
    }

    /* [신규] 이름(Name) 행을 카드 헤더로 변환 */
    .admin-table td.cell-name {
        display: block; /* 그리드 해제 */
        background-color: var(--color-accent); /* 연한 파란 배경 */
        color: var(--color-primary-dark);
        padding: 15px 20px;
        border-bottom: 2px solid #fff;
    }

    /* 이름 라벨 숨기기 & 텍스트 강조 */
    .admin-table td.cell-name::before { display: none; } 
    .admin-table td.cell-name {
        font-size: 1.1rem;
        font-weight: 800;
        text-align: left;
    }
    

    .holiday-name { font-size: 0.75rem; max-width: 50px; }
    .weather-info { font-size: 0.7rem; padding: 1px 4px; }
    .fc-daygrid-day-number { font-size: 0.85rem; }

    .visitor-widget {
        display: none !important;
    }

    .col-author {
        display: flex !important;
        align-items: center;
    }


     .matrix-menu-header { 
        background: #fcfcfc; 
        text-align: left; 
        width: 100% !important; /* 가로 가득 채움 */
        padding: 12px 15px !important;
        box-sizing: border-box;
    }
    .matrix-role-cell { 
        display: flex !important; 
        align-items: center; 
        justify-content: space-between; /* 라벨-왼쪽, 체크박스-오른쪽 배치 */
        padding: 10px 15px !important;
        width: 100% !important; /* 고정 px(300px) 삭제 */
        text-align: left !important;
        box-sizing: border-box;
    }

    .mobile-role-label { 
        display: block; 
        font-size: 0.85rem; 
        color: #444; 
        font-weight: 600;
        flex: 1; /* 가로 비율 확보 */
    }

    .perm-group-wrap { 
        display: flex; 
        gap: 8px; /* 체크박스 그룹 간 적절한 간격 */
        flex: 0 0 auto; /* 필요한 만큼만 폭 차지 */
        justify-content: flex-end;
    }

    .perm-group-wrap label { 
        display: flex;
        align-items: center;
        gap: 3px;
        font-size: 0.8rem;
        padding: 5px 0; /* 터치 영역 상하 확보 */
        cursor: pointer;
    }


    /* (1) 통일감 있는 배치 및 (2) 모바일 가로폭 수정 */
    .activity-input-group {
    /* 배치 및 정렬 (controls 스타일 통일) */
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: flex-start; /* 필요에 따라 space-between 변경 가능 */
    gap: 8px; /* 컨트롤 요소 사이의 간격 */

    /* 모바일 화면 폭 초과 방지 */
    width: 100%;
    max-width: 100%; /* 부모 요소를 뚫고 나가지 않도록 제한 */
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
    flex-wrap: wrap; /* 공간이 부족하면 자동으로 줄 바꿈 */
    }


    .export-controls {display: none;}   /* [신규] 내보내기 버튼들 (XLS, IMG, PDF) 숨김 추가 */

    /* 1. 전체 컨테이너 여백 및 배경 */
    .maintenance-view {
        padding: 12px;
        background: #f8fafc; /* 배경색 통일 */
    }

    /* 2. 테이블 -> 카드 변환 (Reset) */
    .maintenance-view table, 
    .maintenance-view tbody, 
    .maintenance-view tr, 
    .maintenance-view td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .maintenance-view thead { display: none; } /* 헤더 숨김 */

    /* 3. 카드(Row) 스타일링 */
    .maintenance-view tr {
        background: white;
        margin-bottom: 20px;
        border-radius: 16px; /* 둥근 모서리 강화 */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid #e2e8f0;
        padding: 0; /* 패딩 제거 (내부에서 제어) */
        overflow: hidden; /* 내부 넘침 방지 */
        position: relative;
    }

    /* 4. 카드 내부 셀(Cell) 공통 */
    .maintenance-view td {
        padding: 12px 16px;
        border-bottom: 1px dashed #f1f5f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;

        /* [수정] 높이 제한을 강력하게 해제해야 겹침이 사라집니다 */
        height: auto !important; 
        min-height: auto; 
    }

    /* 라벨 스타일 */
    .maintenance-view td::before {
        content: attr(data-label);
        font-size: 0.85rem;
        color: #64748b;
        font-weight: 600;
        text-align: left;
        flex-shrink: 0;
    }

    /* --- [섹션별 디테일] --- */

    /* (A) 헤더 섹션: 작업명 */
    .maintenance-view td[data-label="작업명"] {
        background: #fff;
        border-bottom: 2px solid #f1f5f9;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-top: 16px;
    }
    .maintenance-view td[data-label="작업명"]::before { display: none; }
    
    .maintenance-view td[data-label="작업명"] strong {
        font-size: 1.15rem;
        color: #1e293b;
    }

    /* (B) 정보 섹션: 코드, 주기, 필요인원 */
    .maintenance-view td[data-label="코드"],
    .maintenance-view td[data-label="주기"],
    .maintenance-view td[data-label="필요"] {
        color: #334155;
        font-size: 0.95rem;
    }

    /* (C) 입력 섹션: 작업자 명단 (가장 중요) */
    .maintenance-view td[data-label="작업자 명단"] {
        display: block;
        text-align: left;
        border-bottom: none; /* 저장 버튼과 연결 */
        padding-bottom: 5px;
    }
    .maintenance-view td[data-label="작업자 명단"]::before {
        display: block;
        margin-bottom: 8px;
        color: #334155;
    }

    /* 칩 컨테이너: 높이 자동 조절 및 입력창 잘림 방지 */
    .maintenance-view .chip-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        background: #f8fafc;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 8px;
        min-height: 48px; /* 최소 높이 확보 */
    }

    .maintenance-view .chip-input {
        flex-grow: 1;
        width: auto;
        min-width: 120px; /* 너무 작아지지 않게 */
        border: none;
        background: transparent;
        padding: 4px;
        font-size: 1rem; /* 모바일 폰트 크기 확보 */
        height: 32px;
    }

    /* (D) 푸터 섹션: 저장 버튼 */
    .maintenance-view td[data-label="저장"] {
        padding: 0;
        border-top: 1px solid #e2e8f0;
        margin-top: 10px;
    }
    .maintenance-view td[data-label="저장"]::before { display: none; }

    /* 저장 버튼을 꽉 찬 풀 버튼으로 변경 */
    .table-btn-save {
        width: 100%;
        border-radius: 0; /* 둥근 모서리 제거 (카드 하단에 딱 맞게) */
        padding: 15px;
        font-size: 1rem;
        font-weight: 600;
        background-color: #f8fafc;
        color: #475569;
        border: none;
        transition: background 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    
    /* 저장 버튼 활성/호버 상태 */
    .table-btn-save:hover, .table-btn-save:active {
        background-color: var(--color-primary); /* #1a73e8 */
        color: white;
    }

    /* 더티 체킹(황색) 상태일 때 */
    .btn-dirty.table-btn-save {
        background-color: #fffbeb !important;
        color: #d97706 !important;
        animation: none; /* 모바일에선 깜빡임이 거슬릴 수 있음 */
    }

    /* 5. 히스토리(History) UI 개선 */
    .history-list {
        max-height: 300px;
        overflow-y: auto;
        /* 스크롤바 숨기기 (크롬/사파리) */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .history-list::-webkit-scrollbar { 
        display: none; 
    }

    .history-item {
        background: #fff;
        border: 1px solid #f1f5f9;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .history-time {
        font-size: 0.75rem;
        color: #94a3b8;
        background: #f8fafc;
        padding: 2px 6px;
        border-radius: 4px;
    }

    .history-desc {
        font-size: 0.9rem;
        color: #334155;
        display: block; /* 줄바꿈 허용 */
        line-height: 1.4;
    }


    /* 헤더를 세로로 배치하여 공간 확보 */
    .maintenance-view header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }

    .maintenance-period-title {
        font-size: 1.2rem; /* 모바일에서는 조금 작게 */
        padding-left: 4px;
    }


    /* 컨트롤 영역 꽉 차게 조정 */
    .maintenance-view .controls {
        width: 100%;
        margin-left: 0 !important; /* 인라인 스타일 오버라이딩 */
        justify-content: flex-end; /* 우측 정렬 유지 */
        gap: 8px;
    }
    
    .maintenance-view select {
        flex: 1; /* 셀렉트 박스 넓게 */
    }

    .safety-controls .form-row {
        flex-direction: column;
        align-items: stretch !important;
    }
    .safety-controls button {
        width: 100%;
    }
    .safety-item-row {
        padding: 15px !important; /* 터치 영역 확대 */
    }


    /* ── 유지보수 이력 목록 (모바일 카드 변환) ── */
    .ml-header { display: none; }

    .ml-container {
        background: transparent;
        box-shadow: none;
    }

    .ml-row {
        flex-wrap: wrap;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #e8ecf1;
        padding: 16px;
        margin-bottom: 12px;
        gap: 8px;
    }
    .ml-row:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(74, 109, 167, 0.12);
    }

    .ml-col-title {
        flex-basis: 100%;
        padding: 0;
        margin-bottom: 8px;
    }

    .ml-col-activity {
        width: auto;
        text-align: left;
        padding: 0;
        font-size: 0.82rem;
    }
    .ml-col-activity::before {
        content: "\f017"; /* clock 아이콘 */
        font-family: "Font Awesome 6 Free";
        font-weight: 400;
        margin-right: 5px;
        color: #94a3b8;
        font-size: 0.75rem;
    }

    .ml-col-author {
        width: auto;
        text-align: left;
        font-size: 0.82rem;
        color: #64748b;
    }
    .ml-col-author::before {
        content: "\f007"; /* user 아이콘 */
        font-family: "Font Awesome 6 Free";
        font-weight: 400;
        margin-right: 5px;
        color: #94a3b8;
        font-size: 0.75rem;
    }

    .ml-col-participants {
        width: auto;
        margin-left: auto;
    }
    .ml-participant-badge {
        font-size: 0.8rem;
        padding: 3px 8px;
    }

    .ml-col-views {
        width: auto;
    }
    .ml-views-text {
        font-size: 0.78rem;
    }





    





}