/* --- 기본 스타일 (glass/style.css 기반) --- */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
    background: #0f0c29;
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
    color: #f0f2f5;
}

/* --- 대시보드 레이아웃 (sbserver/dashboard-layout.css 참고) --- */
.dashboard-layout-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- 헤더 (sbserver/header.css 참고) --- */
/* --- 헤더 (수정/추가) --- */
.header-container {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-logo-container {
    /* 기존 img 스타일 제거 또는 주석 처리 */
    /* img { height: 40px; object-fit: contain; } */
}


.header-logo-container img {
    height: 40px; /* 로고 크기 */
    object-fit: contain;
}


.header-logo-link {
    text-decoration: none; /* 링크 밑줄 제거 */
    color: inherit; /* 부모 색상 상속 */
}

/* 텍스트 로고 스타일 */
.text-logo {
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    align-items: flex-start; /* 왼쪽 정렬 */
    line-height: 1.1; /* 줄 간격 조정 */
}

.text-logo .logo-main {
    font-size: 1.5em; /* YSG 글자 크기 */
    font-weight: bold;
    color: #e0e0e0; /* 약간 밝은 회색 */
}

.text-logo .logo-sub {
    font-size: 0.8em; /* Toy Ground 글자 크기 */
    color: #b0b0b0; /* 더 연한 회색 */
    margin-top: -2px; /* 위쪽 간격 미세 조정 */
}

/* --- 메인 레이아웃 --- */
.main-layout {
    display: flex;
    flex: 1; /* 남은 공간 모두 차지 */
    min-height: 0; /* flex 자식 요소 스크롤 위해 필요 */
}

/* --- 네비게이터 (sbserver/dashboard-navigator.css 참고 + Glass 스타일) --- */
.navigator {
    width: 250px;
    transition: width 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 네비게이터 Glassmorphism */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0; /* 너비 축소 방지 */
}

.navigator.collapsed {
    width: 70px; /* 아이콘만 보이도록 */
}

.toggle-btn {
    cursor: pointer;
    padding: 15px;
    text-align: center;
    font-size: 1.5em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.navigator-content {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
}

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

.navigator-list li {
    margin-bottom: 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #f0f2f5;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.2s;
    white-space: nowrap;
    overflow: hidden;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-link .icon {
    font-size: 1.2em;
    width: 24px; /* 아이콘 너비 고정 */
    text-align: center;
    margin-right: 15px;
    transition: margin 0.3s ease;
}

.navigator.collapsed .nav-link .label {
    display: none;
}

.navigator.collapsed .nav-link .icon {
    margin-right: 0; /* 축소 시 아이콘 오른쪽 여백 제거 */
}

.navigator.collapsed .nav-link {
    justify-content: center; /* 축소 시 아이콘 중앙 정렬 */
}

/* --- 콘텐츠 영역 --- */
.content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

/* --- 카드 그리드 (glass/style.css 참고) --- */
.card-grid {
    /* Bootstrap row 사용하므로 grid-template-columns 불필요 */
    /* gap 은 Bootstrap g-4 클래스로 대체 */
}

/* --- Glassmorphism 카드 스타일 (glass/style.css 기반) --- */
.card {
    padding: 1.8rem 1.5rem; /* 패딩 약간 조정 */
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.25);
    color: #fff;
    height: 100%; /* 카드 높이 통일 (Bootstrap col 사용 시) */
    display: flex; /* 내부 요소 정렬 위해 추가 */
    flex-direction: column; /* 내부 요소 세로 정렬 */
}

/* 카드별 반투명 색상 클래스 */
.card.card-blue {
    background-color: rgba(58, 123, 213, 0.3);
}

.card.card-green {
    background-color: rgba(66, 184, 131, 0.3);
}

.card.card-red {
    background-color: rgba(248, 80, 50, 0.3);
}

.card.card-purple {
    background-color: rgba(142, 68, 173, 0.3);
}

.card:hover {
    transform: translateY(-5px); /* 호버 효과 약간 줄임 */
    box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.35);
}

/* 호버 시 색상 더 진하게 */
.card.card-blue:hover {
    background-color: rgba(58, 123, 213, 0.5);
}

.card.card-green:hover {
    background-color: rgba(66, 184, 131, 0.5);
}

.card.card-red:hover {
    background-color: rgba(248, 80, 50, 0.5);
}

.card.card-purple:hover {
    background-color: rgba(142, 68, 173, 0.5);
}

.card-icon {
    font-size: 2.5rem; /* 아이콘 크기 약간 줄임 */
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-align: center; /* 아이콘 중앙 정렬 */
}

.card-title {
    font-size: 1.3rem; /* 제목 크기 약간 줄임 */
    font-weight: 700;
    margin: 0 0 0.8rem;
    color: #fff;
    text-align: center; /* 제목 중앙 정렬 */
}

.card-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* 내용 부분이 남은 공간 차지 */
}

/* 카드 내 텍스트 에어리어 */
.card-content textarea {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    resize: none;
}

.card-content textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}


/* 버튼 스타일 (glass/style.css 기반) */
.card-button {
    display: inline-block;
    padding: 0.6rem 1.5rem; /* 버튼 크기 약간 줄임 */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600; /* 폰트 두께 조정 */
    transition: background-color 0.3s ease, color 0.3s ease;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-align: center;
    margin-top: auto; /* 버튼을 카드 하단에 위치 */
    align-self: center; /* 버튼 중앙 정렬 */
}

.card-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* 추가: Bootstrap form-control 조정 */
.form-control {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-control:focus {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    box-shadow: none;
}

/* --- 페이지네이션 스타일 (Glassmorphism 테마 적용) --- */
.pagination {
    /* 기존 Bootstrap 변수 대신 직접 스타일 지정 (필요시 사용) */
    /* --bs-pagination-padding-x: 0.75rem; */
    /* --bs-pagination-padding-y: 0.375rem; */
    /* --bs-pagination-font-size: 1rem; */
    /* --bs-pagination-border-radius: var(--bs-border-radius); */
    /* --bs-pagination-margin-start: calc(-1 * var(--bs-border-width)); */
}

.page-item .page-link {
    background-color: rgba(255, 255, 255, 0.1); /* 기본 배경: 반투명 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 테두리 */
    color: #e0e0e0; /* 기본 글자색 */
    margin: 0 2px; /* 버튼 사이 간격 */
    border-radius: 4px; /* 약간 둥근 모서리 */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.page-item:not(.disabled) .page-link:hover {
    background-color: rgba(255, 255, 255, 0.2); /* 호버 배경 */
    color: #fff; /* 호버 글자색 */
    border-color: rgba(255, 255, 255, 0.3);
}

.page-item.active .page-link {
    background-color: rgba(58, 123, 213, 0.5); /* 활성 배경 (파란색 반투명) */
    border-color: rgba(58, 123, 213, 0.7);
    color: #fff; /* 활성 글자색 */
    font-weight: bold;
}

.page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.05); /* 비활성 배경 */
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(224, 224, 224, 0.5); /* 비활성 글자색 (더 흐리게) */
    pointer-events: none; /* 클릭 불가 */
}

/* 첫/마지막 item 경계선 제거 (선택 사항) */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    /* border-radius 조정 */
    /* border-top-left-radius: 4px; */
    /* border-bottom-left-radius: 4px; */
    /* border-top-right-radius: 4px; */
    /* border-bottom-right-radius: 4px; */
}

/* --- 플로팅 노트북 목록 UI 스타일 --- */
.notebook-floater {
    position: absolute; top: 20px; left: 20px; z-index: 1000;
    width: 200px; border-radius: 8px;
    background: rgba(40, 40, 60, 0.7);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden; transition: height 0.3s ease, background-color 0.3s ease;
}
.notebook-toggle-btn {
    display: flex; align-items: center; width: 100%; padding: 10px 15px;
    background: transparent; border: none; color: #e0e0e0;
    font-size: 0.9em; font-weight: 600; cursor: pointer; text-align: left;
    transition: background-color 0.2s ease;
}
.notebook-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
.notebook-toggle-btn .icon { margin-right: 10px; width: 16px; text-align: center; }
.notebook-toggle-btn .toggle-arrow { transition: transform 0.3s ease; }
.notebook-list-container {
    max-height: 0; overflow-y: auto; transition: max-height 0.3s ease;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.notebook-list { list-style: none; padding: 10px 0; margin: 0; }
.notebook-list li {
    padding: 8px 15px; font-size: 0.85em; color: #ccc; cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notebook-list li:hover { background-color: rgba(255, 255, 255, 0.08); color: #fff; }
.notebook-list li.active {
    background-color: rgba(58, 123, 213, 0.3); color: #fff; font-weight: bold;
}
/* 펼쳐진 상태 */
.notebook-floater:not(.collapsed) .notebook-list-container { max-height: 200px; }
.notebook-floater:not(.collapsed) .notebook-toggle-btn .toggle-arrow { transform: rotate(180deg); }

/* --- 새로운 에이전트 오른쪽 사이드바 스타일 --- */
.agent-sidebar {
    width: 280px; /* 사이드바 너비 */
    flex-shrink: 0; /* 너비 고정 */
    height: calc(100vh - 80px); /* 뷰포트 높이 - 헤더 높이 - 하단 여백 */
    position: sticky; /* 스크롤 따라 이동 */
    top: 70px; /* 헤더 높이만큼 아래에 위치 */
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    /*gap: 15px; !* 섹션 간 간격 *!*/

    /* Glassmorphism 효과 */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    min-height: 0; /* 내부 요소가 넘칠 때 스크롤 가능하도록 */
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: default; /* 기본 커서 */
}
.section-header.notebook-header {
     cursor: pointer; /* 노트북 헤더만 클릭 가능 */
}


.section-header h5 {
    margin: 0;
    font-size: 1.1em;
    color: #fff;
    font-weight: 600;
}
.section-header .icon {
    margin-right: 8px;
    opacity: 0.8;
}

.section-header .toggle-btn {
    background: none;
    border: none;
    color: #ccc;
    padding: 0 5px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.sidebar-section.collapsed .toggle-btn i { /* 접혔을 때 아이콘 회전 */
    transform: rotate(180deg);
}

.section-content {
    overflow-y: auto; /* 내용 많으면 스크롤 */
    overflow-x: hidden;
    max-height: 250px; /* 기본 최대 높이 (노트북 목록용) */
    transition: max-height 0.3s ease; /* 접기/펼치기 애니메이션 */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) rgba(0,0,0,0.1);
}
/* Webkit 스크롤바 */
.section-content::-webkit-scrollbar { width: 6px; }
.section-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 3px; }
.section-content::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.3); border-radius: 3px; }


/* 접혔을 때 내용 숨김 */
.sidebar-section.collapsed .section-content {
    max-height: 0;
    overflow: hidden;
}

/* 문서 목록 섹션 내용 높이 (노트북 목록 아래 공간 차지) */
#document-list-section .section-content {
    flex-grow: 1; /* 남은 공간 차지 */
    max-height: none; /* 높이 제한 없음 (사이드바 전체 높이 내에서) */
}

/* 공통 목록 아이템 스타일 */
.item-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.item-list li {
    padding: 8px 10px; /* 여백 조정 */
    margin-bottom: 4px; /* 아이템 간 간격 */
    border-radius: 4px;
    font-size: 0.9em;
    color: #ccc;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-list li:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.item-list li.active { /* 선택된 항목 */
    background-color: rgba(58, 123, 213, 0.4); /* 활성 색상 조정 */
    color: #fff;
    font-weight: 500;
}
.item-list li .fa-spinner {
    margin-right: 8px;
}

.item-list li .edit-notebook-btn {
    color: #aaa;
    opacity: 0.5; /* 평소엔 반투명 */
    transition: opacity 0.2s, color 0.2s;
}

.item-list li:hover .edit-notebook-btn {
    opacity: 1; /* li에 호버 시 버튼 보이게 */
}

.item-list li .edit-notebook-btn:hover {
    color: #fff; /* 버튼 호버 시 흰색 */
    opacity: 1;
}

/* 구분선 스타일 */
.sidebar-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0;
}

/* --- Agent Dashboard Drag & Drop Styles --- */

/* 1. 스크롤 컨테이너 (Main Content Area) */
.main-content-area {
    flex-grow: 1;
    min-width: 0;
    overflow: auto; /* 캔버스가 커지면 스크롤 */
    position: relative; /* 캔버스의 기준점 */
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.1); /* 캔버스 배경과 구분 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: calc(100vh - 80px); /* 사이드바와 높이 맞춤 */
}

/* 2. 드롭존 캔버스 */
#agent-drop-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%; /* 부모 높이 채우기 */
    transition: width 0.2s, height 0.2s;
}

/* 3. 사이드바 드래그 대상 아이템 */
.item-list li.draggable-item { /* JS에서 추가될 클래스 */
    cursor: grab;
}
.item-list li.draggable-item:active {
    cursor: grabbing;
}

/* 4. 드래그 중인 고스트 요소 스타일 */
.ghost-card {
    position: fixed; /* 화면 기준 */
    left: 0;
    top: 0;
    z-index: 9999;
    opacity: 0.7;
    pointer-events: none; /* 클릭 방해 방지 */
    width: 250px; /* 고정 너비 */
    padding: 15px;
    border-radius: 8px;
    /* Glassmorphism style */
    background: rgba(58, 123, 213, 0.5); /* 파란색 반투명 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    color: #fff;
}
.ghost-card h3 { font-size: 1em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghost-card p { display: none; } /* 고스트 카드에는 제목만 표시 (간략화) */


/* 5. 캔버스에 배치된 카드 스타일 */
.dropped-card {
    position: absolute; /* 캔버스 기준 */
    width: 280px;
    padding: 20px;
    border-radius: 12px;
    cursor: grab;
    touch-action: none;
    color: #fff;
    /* Glassmorphism style */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.dropped-card:active {
     cursor: grabbing;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
}

.dropped-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 아이콘과 제목, 버튼 정렬 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 10px;
    position: relative; /* 삭제 버튼 위치 기준점 */
}

/* ✨ 삭제 버튼 스타일 */
.card-delete-btn {
    position: absolute;
    top: -5px; /* 헤더 상단에 걸치도록 */
    right: -5px; /* 헤더 우측에 걸치도록 */
    background-color: rgba(255, 82, 82, 0.7); /* 반투명 빨간색 */
    color: white;
    border: none;
    border-radius: 50%; /* 원형 버튼 */
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 22px; /* X 문자 수직 중앙 정렬 */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0; /* 내부 여백 제거 */
}

.card-delete-btn:hover {
    background-color: rgba(255, 0, 0, 0.9); /* 호버 시 더 진한 빨간색 */
}

.dropped-card-title {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    word-break: break-word;
}
.dropped-card-content {
    font-size: 0.9em;
    color: #e0e0e0;
}

.dropped-card-footer {
    margin-top: 15px;
    text-align: right; /* 버튼을 오른쪽으로 정렬합니다. */
}

.details-btn {
    padding: 0.4rem 1rem;
    font-size: 0.8em;
}

/* Sidebar의 드래그 가능한 목록 아이템 텍스트 선택 방지 */
.agent-sidebar .item-list li.draggable-item {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

/* --- 터치스크린 드래그 지원을 위한 스타일 추가 --- */

/* 사이드바의 드래그 가능한 목록 아이템 */
.item-list li.draggable-item {
    cursor: grab;
    /* 이 속성이 브라우저의 기본 터치 동작(스크롤)을 막아줍니다. */
    touch-action: none;
    -webkit-touch-action: none; /* 구형 웹킷 브라우저 호환성 */
}

/* 캔버스에 드롭된 카드 (이미 cursor: grab; 이 있음) */
.dropped-card {
    touch-action: none;
    -webkit-touch-action: none;
}

/* --- 새 문서 작성 모달 스타일 --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-content {
    width: 90%;
    max-width: 600px;
    padding: 25px;
    border-radius: 16px;
    color: #fff;
    /* Glassmorphism 효과 */
    background: rgba(30, 30, 50, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.modal-header .modal-title {
    margin: 0;
    font-size: 1.6em;
}
.modal-close-btn {
    background: none;
    border: none;
    font-size: 2.2em;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
.modal-close-btn:hover { color: #fff; }

.modal-body {
    margin-bottom: 25px;
}
.modal-body .form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #ddd;
}
/* .form-control 스타일은 이미 정의되어 있음 */

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- 에이전트 대시보드 레이아웃 수정 --- */
.agent-dashboard-content {
    display: flex; /* 자식 요소들을 가로로 배치 */
    gap: 20px;     /* 메인 영역과 사이드바 사이의 간격 */
    align-items: flex-start; /* 상단 정렬 */
}

/* --- 문서 조회 모달 내용 스타일 --- */
.markdown-content {
    line-height: 1.7;
    color: #e0e0e0;
}
.markdown-content h1, .markdown-content h2, .markdown-content h3 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0.3em;
    margin-top: 1.5em;
    margin-bottom: 1em;
}
.markdown-content code {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'D2Coding', monospace;
}
.markdown-content pre {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
}
.markdown-content pre code {
    padding: 0;
    background-color: transparent;
}
.markdown-content blockquote {
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    padding-left: 1em;
    margin-left: 0;
    color: #ccc;
}

/* --- [신규] 토스트 알림 스타일 --- */
.toast-notification {
    position: fixed; /* 화면 기준 고정 위치 */
    bottom: 30px; /* 하단에서 30px 위 */
    left: 50%; /* 가로 중앙 */
    transform: translateX(-50%); /* 정확한 가로 중앙 정렬 */
    padding: 12px 25px;
    border-radius: 25px; /* 둥근 모서리 */
    background-color: rgba(0, 128, 0, 0.8); /* 반투명 녹색 배경 */
    color: white;
    font-size: 0.95em;
    font-weight: 500;
    z-index: 9999; /* 다른 요소 위에 표시 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    opacity: 0; /* 기본 숨김 */
    visibility: hidden; /* 기본 숨김 */
    transition: opacity 0.5s ease, visibility 0.5s ease, bottom 0.5s ease; /* 부드러운 전환 효과 */
}

/* 토스트가 표시될 때의 스타일 */
.toast-notification.show {
    opacity: 1;
    visibility: visible;
    bottom: 50px; /* 살짝 위로 올라오는 효과 */
}

/* (선택) 오류 토스트 스타일 */
.toast-notification.error {
    background-color: rgba(220, 53, 69, 0.8); /* 반투명 빨간색 */
}

/* --- [신규] Sidebar Zoom Controls Section --- */
.zoom-control-section {
    padding: 10px 0; /* 위아래 약간의 여백 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 위 구분선 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 아래 구분선 */
    margin: 0 -15px; /* 사이드바 패딩 고려하여 좌우 꽉 채우기 */
    padding: 10px 15px; /* 내부 패딩 다시 적용 */
    flex-shrink: 0; /* 높이 고정 */
}

.sidebar-zoom-controls {
    display: flex;
    justify-content: space-around; /* 버튼 간격 균등하게 */
    align-items: center;
}

/* 사이드바 내 Zoom 버튼 스타일 (기존 .zoom-btn 활용 및 조정) */
.sidebar-zoom-controls .zoom-btn {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #e0e0e0; /* 글자색 약간 밝게 */
    padding: 6px 12px;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-grow: 1; /* 버튼들이 공간을 나눠 갖도록 */
    text-align: center;
    margin: 0 4px; /* 버튼 사이 최소 간격 */
}

.sidebar-zoom-controls .zoom-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* 줌 리셋 버튼은 너비를 좀 더 확보 */
.sidebar-zoom-controls .zoom-reset-display {
    min-width: 60px;
    flex-grow: 0.5; /* 다른 버튼보다 덜 늘어나게 */
}

.sidebar-zoom-controls .zoom-btn i {
    pointer-events: none;
}

/* (이전 CSS에서 agent-drop-canvas h4 패딩은 제거하거나 원래대로 복구) */
#agent-drop-canvas h4 {
    padding-top: 20px; /* 원래 값 또는 제거 */
    padding: 20px; /* 원래 값 */
}

/* 구분선 스타일 조정 (선택 사항) */
.sidebar-divider {
    margin: 0; /* 줌 컨트롤 섹션의 border와 겹치지 않게 마진 제거 */
}

/* --- Mobile Bottom Navigation --- */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(30, 30, 50, 0.95); /* 어두운 배경 */
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom); /* 아이폰 하단 바 대응 */
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #aaa;
    text-decoration: none;
    font-size: 0.75rem;
    width: 20%; /* 5개 메뉴 기준 */
}

.mobile-bottom-nav .nav-item i {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item:hover {
    color: #fff;
}

/* 모바일에서 컨텐츠 하단이 탭바에 가려지지 않게 여백 추가 */
@media (max-width: 768px) {
    .content {
        padding-bottom: 80px !important; /* 탭바 높이 + 여백 */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 모바일에서 기존 헤더 스타일 조정 */
    .header-container {
        padding: 0 10px;
    }

    /* 에이전트 대시보드 모바일 레이아웃 조정 */
    .agent-dashboard-content {
        flex-direction: column; /* 세로 배치 */
    }
    .agent-sidebar {
        display: none; /* 모바일에서 에이전트 사이드바는 일단 숨김 (별도 버튼으로 토글 추천) */
        width: 100%;
        position: fixed;
        bottom: 60px;
        top: auto;
        height: 50vh;
        z-index: 999;
    }
}