/* 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;
    --header-bg: #edf0f2;
    --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;      /* 테두리 어둡게 */
    --header-bg: #434343;      /* 헤더 배경 */
    --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(--border-color);
    z-index: 100;
    padding: 0 15px; /* 좌우 패딩 약간 증가 */
    height: 50px; /* 높이 증가 (35px -> 50px) */
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
}
/* 툴바 내부 아이템 정렬 보정 */
#header-toolbar .dx-toolbar-items-container {
    height: 50px;
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}
#header-toolbar .dx-toolbar-item-content {
    display: flex;
    align-items: center;
}

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

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

.toolbar-item-btn {
    vertical-align: middle;
    line-height: 55px;
}

.grid-filter-toggle-btn.dx-button.grid-filter-toggle-active {
    border-color: #2f6fed;
    background-color: #2f6fed;
}

.grid-filter-toggle-btn.dx-button.grid-filter-toggle-active .dx-icon {
    color: #fff;
}
.logo-text {
    font-weight: 800;
    font-size: 30px;
    cursor: pointer;
    letter-spacing: -0.5px;
    color: var(--text-color);
}

/* 2. 메인 영역 */
#main-drawer {
    height: calc(100% - 50px - var(--footer-height));
    position: relative;
}

.top-nav-menu {
    min-width: 460px;
}

.top-nav-menu .dx-menu-horizontal {
    background: transparent;
    border: 0;
}

.top-nav-menu .dx-menu-item-content {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    padding: 8px 14px;
}

.top-nav-menu .dx-menu-item-expanded > .dx-menu-item-content,
.top-nav-menu .dx-state-hover > .dx-menu-item-content {
    background: var(--menubar-bg);
    border-radius: 6px;
}

.top-nav-menu .dx-menu-item.top-menu-active > .dx-menu-item-content {
    background: transparent !important;
    box-shadow: inset 0 -3px 0 #2f6fed;
    border-radius: 0;
}

body.dark-mode .top-nav-menu .dx-menu-item.top-menu-active > .dx-menu-item-content {
    background: transparent !important;
    box-shadow: inset 0 -3px 0 #6ea2ff;
    border-radius: 0;
}

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

/* 카드 스타일 */
.content-card {
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 16px;
    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;
}

.product-intro-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-intro-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: center;
}

.home-intro-image-card {
    width: min(100%, 1180px);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--card-shadow, 0 8px 24px rgba(28, 39, 64, 0.08));
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-intro-image-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.product-intro-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.product-intro-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 5px;
    height: calc(100vh - 215px);
    min-height: 0;
    text-align: center;
}

.product-intro-card h2,
.product-intro-card h3 {
    margin: 0 0 10px;
}

.product-intro-card p {
    margin: 0;
    line-height: 1.6;
}

.docs-split-layout {
    display: grid;
    grid-template-columns: 320px 8px minmax(0, 1fr);
    gap: 0;
    height: 100%;
    min-height: 0;
}

#search-view .content-card,
#board-code-view .content-card,
#user-admin-view .content-card,
#index-admin-view .content-card {
    min-height: 0;
}

.view-section {
    height: 100%;
    min-height: 0;
}

.view-header {
    display: none !important;
}

.board-split-layout {
    display: block;
}

#grid-view.split-mode .board-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) 8px minmax(0, 1.3fr);
    gap: 0;
    min-height: 0;
    height: 100%;
}

.board-list-pane,
.board-detail-pane {
    min-width: 0;
    min-height: 0;
}

.board-list-pane {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;
}

#docs-view,
#grid-view {
    height: 100%;
    min-height: 0;
}

#grid-view .content-card {
    min-height: 0;
}

#grid-view.split-mode .content-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

#grid-view.split-mode .board-split-layout {
    flex: 1;
}

#grid-view.split-mode .board-list-pane,
#grid-view.split-mode .board-detail-pane {
    height: 100%;
}

#grid-view.split-mode #main-grid,
#grid-view.split-mode #main-grid .dx-datagrid {
    height: 100%;
}

.board-detail-pane {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    overflow: auto;
}

.inline-detail-empty {
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    text-align: center;
    line-height: 1.5;
}

.docs-tree-pane,
.docs-detail-pane {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    min-height: 0;
}

.splitter-handle {
    position: relative;
    width: 8px;
    min-width: 8px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    background: transparent;
}

.splitter-handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    background: color-mix(in srgb, var(--border-color) 70%, var(--accent) 30%);
    border-radius: 2px;
    transition: background-color 0.15s ease;
}

.splitter-handle:hover::before,
.splitter-handle.is-dragging::before {
    background: var(--accent);
}

#board-splitter-handle {
    display: none;
}

#grid-view.split-mode #board-splitter-handle {
    display: block;
}

.docs-tree-pane {
    display: flex;
    flex-direction: column;
}

#docs-tree {
    flex: 1;
    overflow: auto;
}

#docs-tree .dx-treeview-item.dx-state-selected,
#docs-tree .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item,
#docs-tree .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item .dx-treeview-item-content,
#docs-tree .dx-treeview-item.dx-state-selected > .dx-treeview-item-content,
#docs-tree .dx-treeview-item.dx-state-selected .dx-treeview-item-text,
#docs-tree .dx-treeview-item.dx-state-selected .dx-treeview-toggle-item-visibility,
#docs-tree .dx-treeview-item.dx-state-selected.dx-state-focused,
#docs-tree .dx-treeview-item.dx-state-selected.dx-state-focused > .dx-treeview-item-content,
#docs-tree .dx-treeview-node.dx-treeview-node-is-selected > .dx-treeview-item,
#docs-tree .dx-treeview-node.dx-treeview-node-is-selected > .dx-treeview-item .dx-treeview-item-content,
#docs-tree .dx-treeview-node.dx-treeview-node-is-selected > .dx-treeview-item .dx-treeview-item-text,
#docs-tree .dx-treeview-item-content.dx-state-selected,
#docs-tree .dx-treeview-item-content.dx-state-selected.dx-state-focused {
    background-color: #2563eb !important;
    color: #fff !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
    background-color: #2563eb !important;
    color: #fff !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row > td a,
.dx-datagrid-rowsview .dx-selection.dx-row > td .dx-link,
.dx-datagrid-rowsview .dx-selection.dx-row > td .dx-icon {
    color: #fff !important;
}

.docs-detail-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.docs-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.docs-pane-header h3 {
    margin: 0 16px;
    font-size: 20px;
    white-space: nowrap;
}

.docs-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
}

#docs-tree-actions {
    flex: 0 0 auto;
}

#docs-tree-actions .dx-toolbar-items-container {
    flex-wrap: nowrap !important;
}

#docs-tree-actions .dx-toolbar-before {
    display: inline-flex;
    gap: 4px;
}

#docs-tree-actions .dx-button {
    min-width: 30px;
}

#docs-tree-actions .dx-button .dx-button-content {
    justify-content: center;
    padding: 0;
}

#docs-tree-actions .dx-button-has-icon .dx-icon {
    margin: 0;
}

#docs-view-content,
#docs-edit-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.docs-content-wrapper {
    flex: 1;
    min-height: 0;
    padding: 0;
}

.docs-history-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.docs-history-meta {
    color: #666;
    font-size: 13px;
    min-height: 18px;
    margin-left: auto;
    text-align: right;
}

.docs-detail-header {
    margin-top: 8px;
}

#docs-article-title {
    margin-bottom: 12px;
}

#docs-article-body {
    min-height: 220px;
}

.docs-empty-state {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    overflow: auto;
    color: #888;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.docs-empty-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.docs-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.docs-version-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.docs-version-row label {
    font-size: 13px;
    color: #555;
    font-weight: 600;
}

/* 요약 카드 (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(--icon-bg);
    color: var(--text-color);
}
.stat-icon > i {
    font-size: 25px;
}
.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: 8px;
}

#home-helpdesk-write-btn .dx-button {
    border-radius: 10px;
}
/* 2:1 비율 */
.grid-2-1 {
    grid-template-columns: 1fr 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(--border-color);
    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(--badge-bg); color: var(--text-color); border: 1px solid var(--border-color); 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.6rem; font-weight: 700; margin: 0 0 16px 0; color: var(--text-color); line-height: 1.35; letter-spacing: -0.5px; }
.inline-detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
#inline-detail-title { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.5px; color: var(--text-color); }
#inline-detail-toolbar { flex: 1 1; }
.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: #007bff; }

.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: #007bff; color: #fff; border-color: #007bff; }
.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) {
    .top-nav-menu {
        min-width: 0;
    }

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

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

    .product-intro-grid {
        grid-template-columns: 1fr;
    }

    .product-intro-card {
        height: clamp(220px, 45vh, 420px);
    }

    .home-intro-gallery {
        grid-template-columns: 1fr;
    }

    .docs-split-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    #grid-view.split-mode .board-split-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .splitter-handle {
        display: none !important;
    }

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

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

.theme-toggle-switch {
    position: static;
    right: auto;
}

@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: #007bff;
    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: #0056b3;
}

/* 채팅 버튼 스타일 */
.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, #ffa000 0%, #e8ab40 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-issues,
#list-done {
    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-issues,
    #list-done {
        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;
}

/* Read/Write rich-text style parity (view vs editor) */
#write-form .dx-htmleditor-content .ql-editor,
#docs-html-editor .dx-htmleditor-content .ql-editor,
.detail-content-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-color);
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#write-form .dx-htmleditor-content .ql-editor,
#docs-html-editor .dx-htmleditor-content .ql-editor {
    padding: 18px;
}

#write-form .dx-htmleditor-content .ql-editor p,
#docs-html-editor .dx-htmleditor-content .ql-editor p,
.detail-content-text p {
    margin: 0 0 10px;
}

#write-form .dx-htmleditor-content .ql-editor > *:last-child,
#docs-html-editor .dx-htmleditor-content .ql-editor > *:last-child,
.detail-content-text > *:last-child {
    margin-bottom: 0;
}

#write-form .dx-htmleditor-content .ql-editor h1,
#write-form .dx-htmleditor-content .ql-editor h2,
#write-form .dx-htmleditor-content .ql-editor h3,
#write-form .dx-htmleditor-content .ql-editor h4,
#docs-html-editor .dx-htmleditor-content .ql-editor h1,
#docs-html-editor .dx-htmleditor-content .ql-editor h2,
#docs-html-editor .dx-htmleditor-content .ql-editor h3,
#docs-html-editor .dx-htmleditor-content .ql-editor h4,
.detail-content-text h1,
.detail-content-text h2,
.detail-content-text h3,
.detail-content-text h4 {
    margin: 18px 0 10px;
    line-height: 1.35;
    font-weight: 700;
}

#write-form .dx-htmleditor-content .ql-editor ul,
#write-form .dx-htmleditor-content .ql-editor ol,
#docs-html-editor .dx-htmleditor-content .ql-editor ul,
#docs-html-editor .dx-htmleditor-content .ql-editor ol,
.detail-content-text ul,
.detail-content-text ol {
    margin: 0 0 10px 22px;
    padding: 0;
}

#write-form .dx-htmleditor-content .ql-editor li,
#docs-html-editor .dx-htmleditor-content .ql-editor li,
.detail-content-text li {
    margin-bottom: 4px;
}

#write-form .dx-htmleditor-content .ql-editor table,
#docs-html-editor .dx-htmleditor-content .ql-editor table,
.detail-content-text table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 12px 0;
}

#write-form .dx-htmleditor-content .ql-editor th,
#write-form .dx-htmleditor-content .ql-editor td,
#docs-html-editor .dx-htmleditor-content .ql-editor th,
#docs-html-editor .dx-htmleditor-content .ql-editor td,
.detail-content-text th,
.detail-content-text td {
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    vertical-align: top;
    text-align: left;
    background: var(--card-bg);
}

#write-form .dx-htmleditor-content .ql-editor th,
#docs-html-editor .dx-htmleditor-content .ql-editor th,
.detail-content-text th {
    font-weight: 600;
    background: color-mix(in srgb, var(--border-color) 20%, var(--card-bg) 80%);
}

#write-form .dx-htmleditor-content .ql-editor blockquote,
#docs-html-editor .dx-htmleditor-content .ql-editor blockquote,
.detail-content-text blockquote {
    margin: 12px 0;
    padding: 8px 12px;
    border-left: 4px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--card-bg) 92%);
}

#write-form .dx-htmleditor-content .ql-editor pre,
#docs-html-editor .dx-htmleditor-content .ql-editor pre,
.detail-content-text pre {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--card-bg) 85%, #000 15%);
    overflow-x: auto;
}

#write-form .dx-htmleditor-content .ql-editor code,
#docs-html-editor .dx-htmleditor-content .ql-editor code,
.detail-content-text code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.92em;
}

#write-form .dx-htmleditor-content .ql-editor img,
#docs-html-editor .dx-htmleditor-content .ql-editor img,
.detail-content-text img {
    max-width: 100%;
    height: auto;
}

.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: rgba(79, 110, 247, 0.05);
}

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

.reply-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: #4f6ef7;
    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: rgba(79, 110, 247, 0.06);
}

.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;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.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;
    min-height: 128px;
    display: flex;
    flex-direction: column;
}

.search-result-item:hover {
    border-color: #8fa9ff;
    box-shadow: 0 4px 14px rgba(79, 110, 247, 0.12);
}

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

.search-result-category {
    font-size: 12px;
    color: #4f6ef7;
    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;
    min-height: calc(1.55em * 2);
}

#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;
}

#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;
    }
}

/* Design Refresh (layout structure unchanged) */
:root {
    --accent: #2f6fed;
    --accent-strong: #1e4fd0;
    --accent-soft: #eaf0ff;
    --accent-glow: 47, 111, 237;
    --surface-muted: #f7f9fc;
    --card-shadow: 0 8px 24px rgba(28, 39, 64, 0.08);
    --card-shadow-hover: 0 12px 28px rgba(28, 39, 64, 0.14);
}

body.dark-mode {
    --accent: #79a6ff;
    --accent-strong: #5b90ff;
    --accent-soft: #2d3c60;
    --accent-glow: 121, 166, 255;
    --surface-muted: #2e3442;
    --card-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    --card-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.34);
}

html, body {
    background:
            radial-gradient(circle at 0% 0%, rgba(var(--accent-glow), 0.08), transparent 36%),
            radial-gradient(circle at 100% 0%, rgba(var(--accent-glow), 0.06), transparent 32%),
            var(--bg-color);
}

#header-toolbar {
    background: linear-gradient(180deg, var(--header-bg) 0%, color-mix(in srgb, var(--header-bg) 86%, #ffffff 14%) 100%);
}

#header-toolbar .dx-toolbar-item .dx-icon {
    color: var(--accent);
}

.top-nav-menu .dx-menu-item-content {
    border-radius: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.top-nav-menu .dx-menu-item.top-menu-active > .dx-menu-item-content {
    color: var(--accent) !important;
    box-shadow: inset 0 -3px 0 var(--accent);
}

.content-card,
.board-list-pane,
.board-detail-pane,
.docs-tree-pane,
.docs-detail-pane,
.dashboard-item,
.product-intro-card {
    border-color: color-mix(in srgb, var(--border-color) 85%, var(--accent) 15%);
    box-shadow: var(--card-shadow);
}

.dashboard-item:hover,
.product-intro-card:hover {
    box-shadow: var(--card-shadow-hover);
}

.card-header h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    vertical-align: middle;
}

.stat-icon {
    background: linear-gradient(145deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(var(--accent-glow), 0.28);
}

.category-badge {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border-color) 72%);
}

.dx-datagrid-headers {
    background: color-mix(in srgb, var(--surface-muted) 80%, var(--accent-soft) 20%);
}

.dx-datagrid-headers .dx-header-row > td {
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 78%, var(--accent) 22%);
    font-weight: 700;
}

#docs-tree .dx-treeview-item.dx-state-selected,
#docs-tree .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item,
#docs-tree .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item .dx-treeview-item-content,
#docs-tree .dx-treeview-item.dx-state-selected > .dx-treeview-item-content,
#docs-tree .dx-treeview-item.dx-state-selected .dx-treeview-item-text,
#docs-tree .dx-treeview-item.dx-state-selected .dx-treeview-toggle-item-visibility,
#docs-tree .dx-treeview-item.dx-state-selected.dx-state-focused,
#docs-tree .dx-treeview-item.dx-state-selected.dx-state-focused > .dx-treeview-item-content,
#docs-tree .dx-treeview-node.dx-treeview-node-is-selected > .dx-treeview-item,
#docs-tree .dx-treeview-node.dx-treeview-node-is-selected > .dx-treeview-item .dx-treeview-item-content,
#docs-tree .dx-treeview-node.dx-treeview-node-is-selected > .dx-treeview-item .dx-treeview-item-text,
#docs-tree .dx-treeview-item-content.dx-state-selected,
#docs-tree .dx-treeview-item-content.dx-state-selected.dx-state-focused,
.dx-datagrid-rowsview .dx-selection.dx-row > td,
.dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
    background-color: var(--accent) !important;
}

.dx-button.dx-button-default,
.editor-btn.primary,
#btnOpenModal,
.chat-trigger-round {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    border-color: color-mix(in srgb, var(--accent-strong) 70%, #000 30%);
}

.dx-button.dx-button-default:hover,
.editor-btn.primary:hover,
#btnOpenModal:hover,
.chat-trigger-round:hover {
    filter: brightness(1.04);
}

#footer-copyright {
    color: color-mix(in srgb, var(--text-color) 65%, var(--accent) 35%);
}



/* Content toolbars should blend with card surface in dark mode */
body.dark-mode #content-container .dx-toolbar,
body.dark-mode #content-container .dx-toolbar-items-container {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

.dx-menu .dx-menu-item-text {
    font-size: 18px;  /* 원하는 크기 */
}


.dx-empty-message {
    content: "데이터가 없습니다";
}


/* 1. 기본 텍스트 스타일 및 줄간격 통일 */
#write-form .dx-htmleditor-content .ql-editor,
#docs-html-editor .dx-htmleditor-content .ql-editor,
.detail-content-text,
.detail-content-text :is(p, span, div, li, td, th, blockquote) {
    font-family: "Noto Sans KR", "Malgun Gothic", sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important; /* 줄간격을 1.8로 통일하여 가독성 확보 */
    color: var(--text-color) !important;
}

/* 2. 문단(P) 간격 설정 (줄간격이 좁아 보이는 문제 해결) */
#write-form .dx-htmleditor-content .ql-editor p,
#docs-html-editor .dx-htmleditor-content .ql-editor p,
.detail-content-text p {
    margin-top: 0 !important;
    margin-bottom: 12px !important; /* 문단 하단 여백을 주어 에디터/조회 화면 일치 */
}

/* 3. 표(Table) 쪼그라듦 방지 및 스타일 동기화 */
#write-form .dx-htmleditor-content .ql-editor table,
#docs-html-editor .dx-htmleditor-content .ql-editor table,
.detail-content-text table {
    width: 100% !important;           /* 표가 컨테이너 너비를 꽉 채우도록 설정 */
    table-layout: fixed !important;    /* 셀 내용에 따라 너비가 쪼그라드는 것 방지 */
    border-collapse: collapse !important;
    margin: 15px 0 !important;
}

#write-form .dx-htmleditor-content .ql-editor :is(th, td),
#docs-html-editor .dx-htmleditor-content .ql-editor :is(th, td),
.detail-content-text :is(th, td) {
    border: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
    height: auto !important;           /* 높이 자동 조절 */
    word-break: break-all !important; /* 긴 텍스트로 인한 표 깨짐 방지 */
}

/* 4. 리스트 및 들여쓰기 스타일 */
.detail-content-text .ql-align-center { text-align: center; }
.detail-content-text .ql-align-right { text-align: right; }
.detail-content-text .ql-indent-1 { padding-left: 3em; }
.detail-content-text .ql-indent-2 { padding-left: 6em; }

/* 5. 에디터 내부 패딩 보정 */
.dx-htmleditor-content .ql-editor {
    padding: 20px !important;
}

/* 1. 폰트, 크기, 줄간격, 자간 강제 통일 */
#write-form .ql-editor,
#docs-html-editor .ql-editor,
.detail-content-text,
.detail-content-text * {
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;      /* 줄간격 확보 */
    letter-spacing: -0.2px !important; /* 자간 보정 */
    color: var(--text-color) !important;
}

/* 2. 문단(P) 간격 일치 */
.ql-editor p,
.detail-content-text p {
    margin: 0 0 12px 0 !important; /* 문단 사이 여백 */
}

/* 3. 테이블(표) 쪼그라듦 방지 및 테두리 설정 */
#write-form .ql-editor table,
#docs-html-editor .ql-editor table,
.detail-content-text table {
    width: 100% !important;           /* 무조건 가로 꽉 채우기 */
    table-layout: auto !important;    /* 내용에 따라 셀 너비 조절 */
    border-collapse: collapse !important;
    margin: 15px 0 !important;
    border: 1px solid var(--border-color) !important;
}

.ql-editor :is(th, td),
.detail-content-text :is(th, td) {
    border: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
    min-width: 30px;
    height: auto !important;
    word-break: break-all !important; /* 표 밖으로 글자 나가는 것 방지 */
}

/* 4. 리스트(UL, OL) 들여쓰기 정렬 */
.detail-content-text ul,
.detail-content-text ol {
    padding-left: 1.5em !important;
    margin: 0 0 12px 0 !important;
}