/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* CSS 변수: 라이트 모드 (기본) */
:root {
    --bg-color: #f4f5f7;
    --card-bg: #fff;
    --text-color: #333;
    --border-color: #ddd;
    --accent-color: #4f6ef7;
    --accent-strong: #3d59d9;
    --accent-soft: #edf1ff;
    --accent-border: #cfdaff;
    --header-bg: #fff;
    --sidebar-bg: #fff;
    --icon-bg: #f5f5f5;
    --badge-bg: #eee;
    --menubar-bg: #edf0f2;
    --footer-height: 42px;
    --chat-panel-bg: #ffffff;
    --chat-panel-border: #d7dbe0;
    --chat-status-color: #5c636f;
    --chat-ref-bg: #f6f8fb;
    --chat-ref-border: #dfe3e8;
    --chat-ref-header: #6b7280;
    --chat-ref-text: #334155;
    --chat-ref-link: #1d4ed8;
    --chat-ref-type-bg: #e9edf3;
    --chat-ref-type-text: #475569;
}

/* CSS 변수: 다크 모드 (body.dark-mode 클래스 추가 시 적용) */
body.dark-mode {
    --bg-color: #2a2a2a;       /* 전체 배경 어둡게 */
    --card-bg: #363640;        /* 카드 배경 (DevExtreme Dark 테마와 유사한 톤) */
    --text-color: #eee;        /* 글자색 밝게 */
    --border-color: #444;      /* 테두리 어둡게 */
    --accent-color: #7f96ff;
    --accent-strong: #95a9ff;
    --accent-soft: #2f3a66;
    --accent-border: #4f5f9e;
    --header-bg: #363640;      /* 헤더 배경 */
    --sidebar-bg: #363640;     /* 사이드바 배경 */
    --icon-bg: #4a4a55;        /* 아이콘 배경 */
    --badge-bg: #4a4a55;       /* 뱃지 배경 */
    --menubar-bg: #434343;     /* 메뉴바 배경 */
    --chat-panel-bg: #2f3138;
    --chat-panel-border: #474b55;
    --chat-status-color: #b6beca;
    --chat-ref-bg: #3a3e48;
    --chat-ref-border: #505667;
    --chat-ref-header: #c7cfdb;
    --chat-ref-text: #d9e1ee;
    --chat-ref-link: #8db3ff;
    --chat-ref-type-bg: #4a5060;
    --chat-ref-type-text: #e2e8f0;
}

* {
    box-sizing: border-box;
}

/* 기본 레이아웃 설정 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    overflow: hidden;
    transition: background-color 0.3s, color 0.3s; /* 부드러운 전환 효과 */
}

/* 1. 헤더 */
#header-toolbar {
    background: var(--header-bg);
    border-bottom: 1px solid var(--accent-border);
    z-index: 100;
    padding: 0 15px; /* 좌우 패딩 약간 증가 */
    height: 50px; /* 높이 증가 (35px -> 50px) */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
}
/* 툴바 내부 아이템 정렬 보정 */
#header-toolbar .dx-toolbar-items-container {
    height: 50px;
}
#header-toolbar .dx-toolbar-item-content {
    display: flex;
    align-items: center;
}

/* 로고 이미지 스타일 */
.header-logo {
    height: 35px; /* 로고 높이 고정 */
    width: auto;
    cursor: pointer;
    vertical-align: middle;
}

/* 헤더 버튼 아이콘 크기 키우기 */
.header-btn .dx-icon {
    font-size: 25px !important; /* 아이콘 크기 증가 */
}

.toolbar-item-btn {
    vertical-align: middle;
    line-height: 55px;
}
.logo-text {
    font-weight: 800;
    font-size: 30px;
    cursor: pointer;
    letter-spacing: -0.5px;
    color: var(--text-color);
}

/* 2. 메뉴 바 (높이 45px) - 새로 추가됨 */
#menu-bar {
    display: flex;
    height: 40px;
    background: var(--menubar-bg);
    border-bottom: 1px solid var(--accent-border);
    align-items: center;
    box-sizing: border-box;
}

/* 메뉴 바 - 좌측 (트리 검색) */
#menu-left-panel {
    width: 280px; /* 사이드바 너비와 일치 */
    min-width: 280px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid var(--border-color);
    box-sizing: border-box;
    gap: 5px;
    overflow: hidden; /* 슬라이딩 시 내용 넘침 방지 */
    transition: width 0.3s ease-out, min-width 0.3s ease-out, padding 0.3s ease-out, opacity 0.2s ease-out; /* 부드러운 전환 효과 */
}

/* 메뉴 바 - 우측 (토글 + 네비게이션) */
.menu-right-panel {
    flex: 1;
    /* padding: 0 10px; */
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    gap: 10px; /* 아이템 간격 */
}

/* 2. 드로어 & 사이드바 */
#main-drawer {
    height: calc(100% - 95px - var(--footer-height)); /* 헤더(50) + 메뉴바(45) + footer */
    position: relative;
}
.dx-drawer-panel-content {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    width: 280px !important;
}
#navigation-tree { padding: 10px; }
/* 트리 아이템 글자색은 DevExtreme 테마가 처리하지만 강제 적용 필요시 사용 */
.dx-treeview-item { font-size: 14px; padding: 5px 0; color: var(--text-color); }

/* 3. 메인 콘텐츠 컨테이너 */
#content-container {
    height: 100%;
    position: relative;
    overflow-y: auto;
    padding: 15px;
    box-sizing: border-box;
}

/* 카드 스타일 */
.content-card {
    /*background: var(--card-bg);*/
    /*border-radius: 4px;*/
    /*border: 1px solid var(--border-color);*/
    /*padding: 20px;*/
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    color: var(--text-color);
}

/* 4. Home View 대시보드 */
#home-view { display: flex; flex-direction: column; gap: 5px; padding-bottom: 20px; }

.hero-section {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero-title { font-size: 2rem; margin: 0 0 15px 0; font-weight: 700; color: var(--text-color); }

.hero-search {
    height: 60px !important;
    border-radius: 35px !important;
    width: 70% !important;
}

/* 요약 카드 (Grid 적용) */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4등분 */
}
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.stat-icon {
    width: 45px; height: 45px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--accent-soft);
    color: var(--accent-color);
}
.stat-info { display: flex; flex-direction: column; }
.stat-label { font-size: 13px; color: #888; margin-bottom: 3px; }
.stat-value { font-size: 20px; font-weight: 800; color: var(--text-color); }

/* 대시보드 그리드 (Grid 적용) */
.dashboard-grid {
    display: grid;
    gap: 2px;
}
/* 2:1 비율 */
.grid-2-1 {
    grid-template-columns: 2fr 1fr;
}
/* 3등분 */
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.dashboard-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color); /* 보더가 안 보인다면 여기서 확실히 정의 */
    border-radius: 8px; /* 살짝 굴려주면 더 깔끔합니다 */
    padding: 15px;
    display: flex;
    flex-direction: column;
    min-height: 180px;
    min-width: 300px;
    flex: 1; /* 부모 너비를 반반씩 나눠 갖게 함 */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--accent-border);
    padding-bottom: 10px;
}
.card-header h3 { margin: 0; font-size: 1rem; color: var(--text-color); font-weight: 700; }

/* =========================================
   상세 화면 (Modern & Clean Design)
   ========================================= */
.detail-content-wrapper { padding: 0 20px; }
.detail-header { margin-bottom: 20px; }

/* 카테고리 & 상태 배지 영역 */
.detail-top-meta { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.category-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-border); margin: 0; }
.status-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.status-badge.waiting { background: #fff3e0; color: #e65100; border: 1px solid #ffe0b2; }
.status-badge.done { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
body.dark-mode .status-badge.waiting { background: #4a2c0f; color: #ffb74d; border: 1px solid #6d4c41; }
body.dark-mode .status-badge.done { background: #1b3a20; color: #81c784; border: 1px solid #2e5a36; }

/* 제목 및 인포 */
#detail-title { font-size: 1.8rem; font-weight: 700; margin: 0 0 16px 0; color: var(--text-color); line-height: 1.35; letter-spacing: -0.5px; }
.detail-info { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #888; }
.info-divider { color: var(--border-color); font-size: 12px; }
.detail-divider { margin: 0 0 24px 0; border: 0; height: 1px; background: var(--border-color); }

/* 본문 영역 (답답한 카드 박스 형태 제거) */
.detail-main-body {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 30px !important;
}
.detail-content-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-color);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.detail-attachment-footer { margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--border-color); }
.detail-attachment-title { font-size: 13px; font-weight: 600; color: #888; margin-bottom: 10px; }


/* =========================================
   댓글 / 답글 영역 (Thread Style)
   ========================================= */
.reply-section {
    margin-top: 20px;
    padding-top: 30px;
    border-top: 2px solid var(--border-color);
}
.reply-section h3 { margin: 0 0 20px; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 6px; }

/* 개별 댓글 아이템 */
.inquiry-comment-item {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}
.inquiry-comment-item:last-child { border-bottom: none; }
.inquiry-comment-item.is-child {
    margin-left: calc(var(--comment-depth) * 44px);
    position: relative;
}
/* 대댓글 연결선 (선택사항, 더 세련된 느낌을 줌) */
.inquiry-comment-item.is-child::before {
    content: ''; position: absolute; left: -28px; top: -20px;
    width: 16px; height: 50px;
    border-left: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    border-bottom-left-radius: 8px; opacity: 0.5;
}

/* 유저 아바타 아이콘 */
.comment-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--menubar-bg); display: flex; align-items: center; justify-content: center;
    color: #888; flex-shrink: 0; border: 1px solid var(--border-color);
}

.comment-content-wrapper { flex: 1; min-width: 0; }
.inquiry-comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.inquiry-comment-writer { font-weight: 700; font-size: 14px; color: var(--text-color); }
.inquiry-comment-date { font-size: 12px; color: #999; }
.inquiry-comment-body { font-size: 14.5px; line-height: 1.6; color: var(--text-color); margin-bottom: 12px; }

/* 하단 액션 버튼 (텍스트형) */
.inquiry-comment-actions { display: flex; gap: 14px; }
.action-btn { background: none; border: none; color: #888; font-size: 13px; font-weight: 500; padding: 0; cursor: pointer; transition: color 0.2s; }
.action-btn:hover { color: var(--text-color); text-decoration: underline; }

/* 댓글 및 답글 에디터 */
.inquiry-comment-editor, .inline-reply-editor {
    background: var(--menubar-bg); border-radius: 10px; padding: 18px;
    margin-top: 16px; border: 1px solid var(--border-color);
}
.inquiry-comment-editor-mode, .inline-reply-mode { font-weight: 600; color: var(--text-color); margin-bottom: 12px; font-size: 14px; }
#inquiry-comment-input, .inline-reply-input {
    width: 100%; border: 1px solid var(--border-color); border-radius: 8px;
    padding: 14px; background: var(--card-bg); color: var(--text-color);
    font-size: 14.5px; resize: vertical; min-height: 90px; box-sizing: border-box; font-family: inherit;
    transition: border-color 0.2s;
}
#inquiry-comment-input:focus, .inline-reply-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.editor-actions-wrap { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
.editor-btn { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-color); padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.editor-btn.primary { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.editor-btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.editor-btn:hover { opacity: 0.9; }

/* 팝업 */
.dx-popup-content { padding: 20px !important; }
.form-buttons { margin-top: 20px; text-align: right; }

/* =========================================
   반응형 웹 (Mobile Responsive)
   ========================================= */
@media (max-width: 768px) {
    /* 1. 메뉴 바 조정 */
    #menu-left-panel {
        display: none;
    }
    .menu-right-panel {
        padding-left: 10px;
    }

    /* 2. 대시보드 레이아웃 (Grid 재정의) */
    .summary-cards {
        grid-template-columns: repeat(2, 1fr); /* 모바일은 2열 */
    }

    .dashboard-grid.grid-2-1,
    .dashboard-grid.grid-3 {
        grid-template-columns: 1fr; /* 모바일은 1열 (세로 배치) */
    }

    /* 3. 상세 화면 */
    #detail-title { font-size: 1.3rem; }
    .detail-info { flex-direction: column; gap: 5px; }
    .info-item { margin-left: 0 !important; }

    /* 4. 기타 */
    #content-container { padding: 10px; }
    .content-card { padding: 15px; }
}

#tree-search-box {
    border: none;
    background-color: transparent;
    flex:1
}

.theme-toggle-switch {
    position: fixed;
    right: 15px;
}

@keyframes blink{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity:0}
}
/* 우측 플로팅 버튼 스타일 */
#btnOpenModal {
    position: fixed;
    right: 20px;
    bottom: 100px;
    z-index: 9998;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: white;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

#btnOpenModal:hover {
    transform: scale(1.1);
    background-color: var(--accent-strong);
}

/* 채팅 버튼 스타일 */
.chat-trigger-round {
    position: fixed;
    right: 30px;
    z-index: 9998;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #28a745;
    color: white;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.chat-trigger-round:hover {
    transform: scale(1.1);
    background-color: #218838;
}

.chat-trigger-round .dx-icon {
    font-size: 28px !important; /* 원하는 크기로 조절 */
}

/* 아이콘 크기가 커지면 위치가 어긋날 수 있으므로 중앙 정렬 보정 */
.chat-trigger-round .dx-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 슬라이딩 채팅창 컨테이너 */
#chatContainer {
    position: fixed;
    top: 0;
    right: -450px; /* 너비보다 조금 더 숨김 */
    width: 450px;  /* 너비 살짝 확장 */
    height: 100%;
    background-color: var(--chat-panel-bg);
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 11000 !important;
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--chat-panel-border);
}

#chatContainer.open {
    right: 0;
}

/* 커스텀 헤더 */
.chat-header-bar {
    height: 50px;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-strong) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.close-chat-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
}
.close-chat-btn:hover { opacity: 1; }

/* DevExtreme Chat 위젯 영역 */
#dxChatTarget {
    flex: 1; /* 남은 높이 모두 사용 */
    overflow: hidden;
}

.custom-spinner {
    width:14px;
    height:14px;
    border:2px solid #ccc;
    border-top:2px solid #666;
    border-radius:50%;
    animation: spin 0.8s linear infinite;
}

.chat-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--chat-status-color);
    font-size: 13px;
    line-height: normal;
    margin: 0;
    padding: 2px 0;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.references {
    background-color: var(--chat-ref-bg);
    border: 1px solid var(--chat-ref-border);
    border-radius: 6px;
    margin-top: 10px;
    padding: 8px;
    color: var(--chat-ref-text);
    white-space: normal;
}

.chat-source-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--chat-ref-header);
    letter-spacing: -0.2px;
    margin-bottom: 5px;
}

.chat-source-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chat-source-item {
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

.chat-source-item:last-child {
    margin-bottom: 0;
}

.chat-source-bullet {
    margin-right: 5px;
    color: var(--chat-ref-header);
}

.chat-source-main {
    flex: 1;
}

.chat-source-type {
    background: var(--chat-ref-type-bg);
    color: var(--chat-ref-type-text);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    margin-right: 4px;
    vertical-align: middle;
}

.chat-source-link {
    color: var(--chat-ref-link);
    text-decoration: none;
    font-weight: 600;
    vertical-align: middle;
}

.chat-source-link:hover {
    text-decoration: underline;
}

.chat-source-title {
    font-weight: 600;
    vertical-align: middle;
}

.ai-msg-body {
    white-space: normal;
}

/* 1. 기본 텍스트 (P 태그) */
.dx-chat-message-content p {
    margin: 0 0 8px 0; /* 문단 간격 조금만 줌 */
    padding: 0;
    line-height: 1.6;
    font-size: 14px; /* 폰트 크기 고정 (원하는 크기로 조절) */
}

/* 2. 제목 태그 (H1 ~ H6) 억제 */
/* 채팅창에서 제목이 너무 크면 보기 싫으므로 일반 글씨보다 조금만 더 굵게 처리 */
.dx-chat-message-content h1,
.dx-chat-message-content h2,
.dx-chat-message-content h3,
.dx-chat-message-content h4 {
    font-size: 1.1em; /* 폰트 크기 살짝만 키움 */
    font-weight: bold;
    margin: 12px 0 6px 0; /* 위아래 여백 적당히 */
    color: #333;
    border-bottom: none; /* h1, h2의 밑줄 제거 */
}

/* 3. 리스트 (UL, OL) 들여쓰기 조정 */
.dx-chat-message-content ul,
.dx-chat-message-content ol {
    margin: 5px 0 10px 20px; /* 왼쪽 여백 확보 */
    padding: 0;
}
.dx-chat-message-content li {
    margin-bottom: 4px;
}

/* 4. 코드 블록 (Pre, Code) 스타일 정리 */
.dx-chat-message-content pre {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto; /* 코드 길면 스크롤 */
    margin: 8px 0;
}
.dx-chat-message-content code {
    font-family: 'Consolas', 'Courier New', monospace;
    background-color: #f0f0f0;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 0.9em;
    color: #d63384; /* 강조색 */
}

/* 5. 마지막 요소 여백 제거 (말풍선 아래 공간 뜨는 것 방지) */
.dx-chat-message-content > *:last-child {
    margin-bottom: 0;
}

/* Restored dashboard one-screen layout + switch toggle style */
#home-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    padding-bottom: 0;
}

.hero-section {
    padding: 12px 16px;
}

.summary-cards {
    gap: 8px;
}

.dashboard-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-layout {
    flex: 1;
    min-height: 0;
}

.dashboard-left {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0; /* 중요: 부모가 자식보다 작아질 수 있게 허용 */
    min-width: 0;  /* 중요: 너비도 마찬가지 */
    overflow: hidden; /* 내부 요소가 삐져나와도 일단 무시 */
}

#chart-weekly {
    width: 100% !important;
}

#list-notice,
#list-issues {
    height: 180px;
}

.theme-toggle-switch {
    position: static !important;
    right: auto !important;
    top: auto !important;
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin-left: 0;
    margin-right: 14px;
}

@media (max-width: 768px) {
    #home-view {
        height: auto;
        overflow: auto;
    }

    #chart-weekly,
    #list-notice,
    #list-issues {
        height: 220px;
    }
}

/* Board detail/write polish */
.detail-main-body {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
}

.detail-meta-line {
    margin: 0 0 8px;
    color: #666;
    font-size: 13px;
}

.detail-content-text {
    margin-top: 10px;
    white-space: normal;
    line-height: 1.65;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Match read-view rendering with dxHtmlEditor(Quill) output styles */
.detail-content-text table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 12px 0;
    table-layout: fixed;
}

.detail-content-text th,
.detail-content-text td {
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    vertical-align: top;
    text-align: left;
    background: var(--card-bg);
    line-height: 1.42;
}

.detail-content-text th {
    font-weight: 600;
    background: rgba(0, 0, 0, 0.03);
}

.detail-content-text td p,
.detail-content-text th p {
    margin: 0;
}

.detail-content-text img {
    max-width: 100%;
    height: auto;
}

.detail-content-text .ql-align-center {
    text-align: center;
}

.detail-content-text .ql-align-right {
    text-align: right;
}

.detail-content-text .ql-align-justify {
    text-align: justify;
}

.detail-attachment-footer {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.detail-attachment-title {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.detail-attachment-links {
    /*display: flex;*/
    flex-wrap: wrap;
    gap: 8px;
}

.reply-section {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.reply-section h3 {
    margin: 0 0 14px;
    font-size: 16px;
}

#inquiry-comments-list {
    margin-bottom: 14px;
}

.inquiry-comment-item {
    margin: 0;
    padding: 12px 0 10px;
    border-bottom: 1px solid #eceff3;
}

.inquiry-comment-item.is-child {
    margin-left: calc(var(--comment-depth) * 18px);
    padding-left: 12px;
    border-left: 2px solid #dfe5ee;
}

.inquiry-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.inquiry-comment-writer {
    font-weight: 600;
}

.inquiry-comment-date {
    font-size: 12px;
    color: #888;
}

.inquiry-comment-body {
    margin-top: 7px;
    white-space: pre-wrap;
    word-break: break-word;
}

.inquiry-comment-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.inquiry-comment-empty {
    color: #888;
    font-size: 13px;
    padding: 8px 0;
}

.inquiry-comment-editor {
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.inquiry-comment-editor-mode {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

#inquiry-comment-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
}

.inquiry-comment-editor-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    justify-content: flex-end;
}

#inquiry-comment-status,
.inline-reply-status {
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0 8px;
}

.inline-reply-editor {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f9fafc;
}

.inline-reply-mode {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.inline-reply-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: inherit;
}

.inline-reply-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;
    align-items: center;
}

.reply-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.reply-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reply-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: var(--accent-color);
    color: #fff;
}

.reply-meta {
    margin-top: 6px;
    color: #777;
    font-size: 12px;
}

.reply-body {
    margin-top: 8px;
    white-space: normal;
    line-height: 1.6;
}

.reply-file {
    margin-top: 8px;
    font-size: 12px;
}

.reply-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.reply-empty {
    color: #888;
    font-size: 13px;
    padding: 8px 0;
}

.reply-row {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.reply-row td:nth-child(3),
.reply-row td:nth-child(4) {
    padding-left: 18px !important;
}

.search-result-summary {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-result-item {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-result-item:hover {
    border-color: var(--accent-border);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.search-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.search-result-category {
    font-size: 12px;
    color: var(--accent-color);
    font-weight: 700;
    flex-shrink: 0;
}

.search-result-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #888;
}

.search-result-snippet {
    margin-top: 7px;
    color: #444;
    font-size: 13px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#write-form .dx-field-item-label-text {
    font-weight: 600;
}

#write-form .dx-fileuploader {
    padding: 8px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
}

.file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    text-decoration: none;
}

.file-link span {
    display: inline-block;
    /*max-width: 220px;*/
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    white-space: nowrap;
    vertical-align: middle;
}

.list-file-icon {
    font-size : 20px;
}

.grid-attachment-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.write-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.write-file-remove {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 8px;
}

.write-file-remove:hover {
    border-color: var(--accent-border);
    color: var(--accent-color);
    background: var(--accent-soft);
}

#app-footer {
    height: var(--footer-height);
    border-top: 1px solid var(--border-color);
    background: var(--menubar-bg);
    color: var(--text-color);
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    padding: 0 12px;
    box-sizing: border-box;
}

.footer-spacer {
    flex: 1;
}

#footer-copyright {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #777;
    white-space: nowrap;
}

.footer-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

#footer-site-select {
    width: 230px;
}

@media (max-width: 768px) {
    #app-footer {
        padding: 0 8px;
    }

    #footer-copyright {
        font-size: 11px;
    }

    #footer-site-select {
        width: 150px;
    }
}