/* 기본 스타일 */
:root {
  --primary-color: #4267B2;
  --secondary-color: #E9EBEE;
  --text-color: #1C1E21;
  --bg-color: #FFFFFF;
  --card-bg: #FFFFFF;
  --border-color: #DADDE1;
  --hover-color: #F5F6F7;
  --like-color: #4080FF;
  --comment-color: #65676B;
  --share-color: #45BD62;
  --error-color: #FA383E;
  --success-color: #42B72A;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* 패널 변수 */
  --panel-border-color: #CFD3D9;
  --panel-bg-color: #FFFFFF;
  --panel-header-bg: #F0F2F5;
  --panel-header-color: #1C1E21;
  --panel-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --panel-btn-hover: #E4E6EB;
  --panel-url-bg: #F0F2F5;
}

/* 다크 모드 */
[data-theme="dark"] {
  --primary-color: #2D88FF;
  --secondary-color: #3A3B3C;
  --text-color: #E4E6EB;
  --bg-color: #18191A;
  --card-bg: #242526;
  --border-color: #3E4042;
  --hover-color: #3A3B3C;
  --like-color: #2078F4;
  --comment-color: #B0B3B8;
  --share-color: #45BD62;
  
  /* 다크 모드 패널 변수 */
  --panel-border-color: #3E4042;
  --panel-bg-color: #242526;
  --panel-header-bg: #3A3B3C;
  --panel-header-color: #E4E6EB;
  --panel-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  --panel-btn-hover: #4E4F50;
  --panel-url-bg: #3A3B3C;
}

body {
  font-family: var(--font-family);
  background-color: var(--secondary-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 네비게이션 바 */
.navbar {
  background-color: #3B5998 !important; /* 페이스북 스타일 파란색 */
  border-bottom: 1px solid var(--border-color);
  padding-top: 2px;
  padding-bottom: 2px;
  min-height: 40px;
}

.navbar-brand {
  font-size: 1.25rem;
  font-weight: bold;
  color: #FFFFFF !important; /* 흰색으로 변경 */
}

.navbar .nav-link {
  color: #FFFFFF !important; /* 내비게이션 링크 색상 흰색으로 변경 */
}

.navbar .nav-link:hover {
  color: rgba(255, 255, 255, 0.8) !important; /* 호버 시 약간 투명도 추가 */
}

.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 다크 모드에서의 네비게이션 바 */
[data-theme="dark"] .navbar, 
body.dark-mode .navbar {
  background-color: #1A1E3B !important; /* 다크 모드에서 더 어두운 색상 */
  border-bottom: 1px solid #2d3748;
}

[data-theme="dark"] .navbar-brand, 
body.dark-mode .navbar-brand {
  color: #FFFFFF !important;
}

[data-theme="dark"] .navbar .nav-link, 
body.dark-mode .navbar .nav-link {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .navbar .nav-link:hover, 
body.dark-mode .navbar .nav-link:hover {
  color: #FFFFFF !important;
}

/* 로그인 버튼 색상 조정 */
.navbar #login-btn,
.navbar #logout-btn {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar #theme-toggle {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar #theme-toggle i {
  color: #FFFFFF;
}

/* 글씨 크기 버튼 */
.navbar .font-size-control .size-btn,
.navbar .font-size-control .size-label {
  color: #FFFFFF;
}

.navbar .font-size-control .size-btn.active {
  background-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

/* 카드 스타일 */
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-title {
  color: var(--text-color);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.card-body {
  padding: 6px;
}

/* 게시물 스타일 */
.post {
  padding: 5px;
}

/* 게시물 헤더 */
.post-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  position: relative;
}

.post-user-info {
  margin-left: 10px;
  flex: 1;
}

.post-username {
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 2px;
}

/* 권한 뱃지 스타일 */
.role-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.25em 0.5em;
  border-radius: 0.25rem;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
}

/* 클릭 가능한 권한 뱃지 스타일 */
.role-badge-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.role-badge-clickable::after {
  content: '\f303'; /* Bootstrap Icon 편집 아이콘 (bi-pencil) 유니코드 */
  font-family: 'Bootstrap-icons';
  position: absolute;
  font-size: 0.6rem;
  top: -4px;
  right: -4px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.role-badge-clickable:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.role-badge-clickable:hover::after {
  opacity: 1;
}

[data-theme="dark"] .role-badge-clickable::after,
body.dark-mode .role-badge-clickable::after {
  background-color: rgba(33, 37, 41, 0.9);
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .role-badge,
body.dark-mode .role-badge {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .role-badge.bg-success, 
body.dark-mode .role-badge.bg-success {
  background-color: #198754 !important;
  color: #fff;
}

[data-theme="dark"] .role-badge.bg-primary, 
body.dark-mode .role-badge.bg-primary {
  background-color: #0d6efd !important;
  color: #fff;
}

[data-theme="dark"] .role-badge.bg-info, 
body.dark-mode .role-badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #212529;
}

[data-theme="dark"] .role-badge.bg-secondary, 
body.dark-mode .role-badge.bg-secondary {
  background-color: #6c757d !important;
  color: #fff;
}

/* 게시물 시간 */
.post-time {
  font-size: 0.75rem;
  color: var(--comment-color);
  margin-top: 2px;
  display: block;
}

.post-content {
  margin-bottom: 5px;
}

.post-text {
  margin-bottom: 5px;
}

.post-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 5px;
}

/* 게시물 액션 버튼 영역 */
.post-actions {
  display: flex;
  border-top: 1px solid var(--border-color);
  padding-top: 4px;  /* 8px에서 4px로 줄임 */
  padding-bottom: 4px; /* 하단 여백 추가 */
}

.post-action-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 4px; /* 8px에서 4px로 줄임 */
  color: var(--comment-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 0.75rem; /* 글자 크기 줄임 */
  line-height: 1;
}

.post-action-btn:hover {
  background-color: var(--hover-color);
}

.post-action-btn i {
  margin-right: 3px; /* 6px에서 3px로 줄임 */
  font-size: 0.85rem; /* 아이콘 크기도 조정 */
}

.post-action-btn.like-btn {
  color: var(--like-color);
}

.post-action-btn.comment-btn {
  color: var(--comment-color);
}

.post-action-btn.share-btn {
  color: var(--share-color);
}

/* 실시간 채팅 버튼 스타일 */
.chat-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chat-btn-content i {
  margin-right: 0 !important;
  margin-bottom: 2px;
  font-size: 1.2rem !important; /* 아이콘 크기 키움 */
}

.chat-btn-text {
  font-size: 0.65rem;
  line-height: 1;
}

/* 다크모드에서 실시간 채팅 버튼 스타일 */
[data-theme="dark"] .chat-btn-content i,
body.dark-mode .chat-btn-content i {
  color: #8ABBFF;
}

[data-theme="dark"] .chat-btn-text,
body.dark-mode .chat-btn-text {
  color: #E4E6EB;
}

/* 반응형에서도 텍스트 표시 */
@media (max-width: 767.98px) {
  .chat-btn-text {
    display: block !important;
  }
}

/* 댓글 섹션 */
.comments-section {
  padding: 3px 5px;
  border-top: 1px solid var(--border-color);
}

.comment {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

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

.comment-author {
  display: flex;
  align-items: center;
}

.comment-author > div {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.author-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.comment-date {
  font-size: 0.75rem;
  color: #6c757d;
  margin-left: 8px;
}

.comment-content {
  background-color: var(--secondary-color);
  border-radius: 18px;
  padding: 5px 8px;
  margin-top: 4px;
  margin-left: 30px;
  width: calc(100% - 50px);
  font-size: 0.85rem;
}

.comment-username {
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0;
}

.comment-text {
  color: var(--text-color);
  font-size: 0.85rem;
}

.delete-comment-btn {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-comment-btn:hover {
  color: #bd2130;
  transform: scale(1.1);
}

.delete-comment-btn i {
  display: block;
}

.new-comment {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.new-comment input {
  flex: 1;
  border: none;
  background-color: var(--secondary-color);
  border-radius: 20px;
  padding: 8px 12px;
  margin-left: 8px;
  color: var(--text-color);
}

.new-comment input:focus {
  outline: none;
  background-color: var(--bg-color);
  box-shadow: 0 0 0 2px var(--primary-color);
}

/* 유저 프로필 */
.profile-avatar {
  width: 100%;
  max-width: 150px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.profile-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.profile-username {
  color: var(--comment-color);
  margin-bottom: 15px;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.profile-stat {
  text-align: center;
}

.profile-stat-number {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-color);
}

.profile-stat-label {
  font-size: 0.8rem;
  color: var(--comment-color);
}

/* 반응형 조정 */
@media (max-width: 767.98px) {
  .navbar-brand {
    font-size: 1.2rem;
  }
  
  .navbar .user-name {
    display: none;
  }
  
  .post-action-btn span {
    display: none;
  }
  
  .post-action-btn i {
    margin-right: 0;
  }
}

/* 로딩 스피너 */
.loading-spinner {
  width: 40px;
  height: 40px;
  margin: 20px auto;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* 오프라인 모드 인디케이터 */
.offline-indicator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: var(--error-color);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  z-index: 1000;
}

.offline-indicator i {
  margin-right: 8px;
}

/* 버튼 스타일 */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #365899;
  border-color: #365899;
}

/* 토스트 알림 */
.toast {
  background-color: var(--card-bg);
  color: var(--text-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* 접근성 개선 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 포커스 표시기 */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--secondary-color);
}

::-webkit-scrollbar-thumb {
  background-color: #BCC0C4;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #9DA1A8;
}

/* 여백 축소를 위한 추가 스타일 */
.container {
  padding-left: 1px;
  padding-right: 1px;
  max-width: 100%;
}

.row {
  margin-left: -1px;
  margin-right: -1px;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  padding-left: 1px;
  padding-right: 1px;
}

/* 상단 여백 감소 */
.mt-4 {
  margin-top: 4px !important;
}

/* 왼쪽 사이드바 너비 조정 */
@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: 20%;
  }
  
  .col-lg-6 {
    flex: 0 0 auto;
    width: 60%;
  }
}

/* 게시물 작성 카드 여백 */
#post-create-card .card-body {
  padding: 6px;
}

/* 리스트 아이템 여백 */
.list-group-item {
  padding: 3px 0;
}

/* 프로필 섹션 여백 조정 */
#sidebar-profile {
  margin-bottom: 6px;
}

/* 버튼 간격 조정 */
.btn-sm {
  padding: 0.15rem 0.35rem;
  font-size: 0.75rem;
}

/* 로그인 카드 여백 조정 */
#login-card .card-body {
  padding: 10px;
}

#login-card .py-5 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

#login-card .mb-3 {
  margin-bottom: 6px !important;
}

#login-card .mb-4 {
  margin-bottom: 6px !important;
}

/* 모달 여백 조정 */
.modal-header, .modal-body, .modal-footer {
  padding: 8px 10px;
}

/* 여백 클래스 전역 조정 */
.mb-4 {
  margin-bottom: 6px !important;
}

.mb-3 {
  margin-bottom: 4px !important;
}

.mb-2 {
  margin-bottom: 2px !important;
}

.me-2 {
  margin-right: 3px !important;
}

.me-3 {
  margin-right: 4px !important;
}

.ms-2 {
  margin-left: 3px !important;
}

.ms-3 {
  margin-left: 4px !important;
}

.p-3 {
  padding: 4px !important;
}

.py-3 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.px-3 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.pt-3 {
  padding-top: 4px !important;
}

/* 게시물 내부 여백 */
.post-content {
  margin-bottom: 5px;
}

.post-text {
  margin-bottom: 5px;
}

.post-image {
  margin-bottom: 5px;
}

/* 프로필 이미지 크기 축소 */
#user-avatar, #post-user-avatar {
  width: 28px !important;
  height: 28px !important;
}

#sidebar-avatar {
  width: 60px !important;
  height: 60px !important;
}

/* 폰트 크기 축소 */
.small {
  font-size: 0.75rem;
}

/* 로그인 카드 컬럼 조정 */
#login-card .col-lg-8 {
  width: 90%;
}

/* 게시물 작성 영역 조정 */
#post-content {
  padding: 5px;
  min-height: 60px;
}

/* 날씨 위젯 스타일 */
.weather-header {
  background-color: var(--hover-color);
  border-bottom: 1px solid var(--border-color);
  border-radius: 7px 7px 0 0;
}

.toggle-weather {
  transition: transform 0.3s ease;
}

.toggle-weather:hover {
  color: var(--primary-color) !important;
}

.toggle-weather:focus {
  box-shadow: none;
}

/* Base64 이미지 스타일 */
.base64-image {
  max-height: 400px;
  object-fit: contain;
}

/* 드래그 가능한 패널 스타일 */
.draggable-panel {
  position: fixed;
  width: 400px;
  height: 300px;
  background-color: var(--panel-bg-color);
  border: 1px solid var(--panel-border-color);
  border-radius: 8px;
  box-shadow: var(--panel-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  z-index: 1000;
  animation: panel-appear 0.3s ease-out;
}

@keyframes panel-appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.draggable-panel.panel-moving {
  opacity: 0.65;
  box-shadow: var(--panel-shadow), 0 0 0 2px var(--primary-color);
  transition: none; /* 드래그 중에는 애니메이션 비활성화 */
  transform: scale(1.02);
}

.draggable-panel.panel-resizing {
  opacity: 0.65;
  box-shadow: var(--panel-shadow), 0 0 0 2px var(--primary-color);
  transition: none; /* 크기 조절 중에는 애니메이션 비활성화 */
}

.draggable-panel.panel-minimized {
  height: auto;
  box-shadow: var(--panel-shadow);
  opacity: 0.95;
}

/* 패널 최대화 스타일 */
.draggable-panel.panel-maximized {
  box-shadow: var(--panel-shadow), 0 0 0 2px var(--primary-color);
  z-index: 1500; /* 최대화된 패널은 다른 패널보다 위에 표시 */
  transition: all 0.3s ease;
  border-color: var(--primary-color);
  border-radius: 0; /* 모서리를 직각으로 변경 */
  position: fixed; /* 고정 위치 */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important; /* 뷰포트 전체 너비 */
  height: 100vh !important; /* 뷰포트 전체 높이 */
  max-width: none !important;
  max-height: none !important;
}

.draggable-panel.panel-maximized .panel-titlebar {
  background-color: var(--primary-color);
  color: white;
  border-radius: 0; /* 타이틀바 모서리 제거 */
}

.draggable-panel.panel-maximized .panel-title {
  color: white;
}

.draggable-panel.panel-maximized .panel-btn {
  color: white;
}

.draggable-panel.panel-maximized .panel-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.draggable-panel:focus-within {
  box-shadow: var(--panel-shadow), 0 0 0 2px var(--primary-color);
  border-color: var(--primary-color);
}

/* 패널 크기 조절 핸들 */
.panel-resize-handle {
  position: absolute;
  z-index: 100;
  background-color: transparent;
}

/* 테두리에 있는 핸들 */
.panel-resize-handle.n {
  top: -3px;
  left: 8px;
  right: 8px;
  height: 6px;
  cursor: ns-resize;
}

.panel-resize-handle.e {
  top: 8px;
  right: -3px;
  bottom: 8px;
  width: 6px;
  cursor: ew-resize;
}

.panel-resize-handle.s {
  bottom: -3px;
  left: 8px;
  right: 8px;
  height: 6px;
  cursor: ns-resize;
}

.panel-resize-handle.w {
  top: 8px;
  left: -3px;
  bottom: 8px;
  width: 6px;
  cursor: ew-resize;
}

/* 모서리에 있는 핸들 */
.panel-resize-handle.ne {
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  cursor: nesw-resize;
}

.panel-resize-handle.se {
  bottom: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  cursor: nwse-resize;
}

.panel-resize-handle.sw {
  bottom: -3px;
  left: -3px;
  width: 10px;
  height: 10px;
  cursor: nesw-resize;
}

.panel-resize-handle.nw {
  top: -3px;
  left: -3px;
  width: 10px;
  height: 10px;
  cursor: nwse-resize;
}

/* 크기 조절 핸들 호버 효과 */
.draggable-panel:hover .panel-resize-handle {
  background-color: rgba(66, 103, 178, 0.1);
}

/* 크기 조절 시 오버레이 */
.panel-resize-overlay {
  background-color: transparent;
  user-select: none;
  pointer-events: auto;
}

/* 패널 타이틀바 */
.panel-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: var(--panel-header-bg);
  border-bottom: 1px solid var(--panel-border-color);
  cursor: move;
  user-select: none;
  transition: background-color 0.2s;
}

/* 타이틀바 좌우 컨트롤 영역 */
.panel-left-controls {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.draggable-panel.panel-moving .panel-titlebar {
  background-color: var(--primary-color);
  color: white;
}

.draggable-panel.panel-moving .panel-title {
  color: white;
}

.panel-title {
  font-weight: 600;
  color: var(--panel-header-color);
  font-size: 0.8rem;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
  flex: 1;
  text-align: center;
}

/* URL 입력 영역 */
.panel-url-container {
  display: flex;
  padding: 8px;
  background-color: var(--panel-url-bg);
  border-bottom: 1px solid var(--panel-border-color);
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.panel-url-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--panel-border-color);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.panel-url-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(66, 103, 178, 0.2);
}

.panel-url-go-btn {
  width: 34px;
  height: 34px;
  border: none;
  background-color: var(--primary-color);
  color: white;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 8px;
  transition: background-color 0.2s, transform 0.1s;
}

.panel-url-go-btn:hover {
  background-color: #365899;
  transform: scale(1.05);
}

.panel-url-go-btn:active {
  transform: scale(0.95);
}

/* URL 버튼 스타일 */
.panel-url-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  color: var(--panel-header-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s, transform 0.1s;
}

.panel-url-btn:hover {
  background-color: var(--panel-btn-hover);
  color: var(--primary-color);
  transform: scale(1.1);
}

.panel-url-btn.active {
  background-color: var(--primary-color);
  color: white;
}

.panel-url-btn:active {
  transform: scale(0.9);
}

/* 패널 콘텐츠 영역 */
.panel-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: white;
  transition: opacity 0.2s;
}

.panel-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: white;
  opacity: 1;
  transition: opacity 0.3s;
}

/* 로딩 스피너 개선 */
.panel-content.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(66, 103, 178, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: panel-spinner 0.8s linear infinite;
  z-index: 10;
}

.panel-content.loading::after {
  content: '로딩 중...';
  position: absolute;
  top: calc(50% + 30px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  color: var(--primary-color);
  font-weight: 500;
  opacity: 0.8;
  z-index: 10;
}

.panel-content.loading {
  background-color: #f8f9fa;
}

.panel-content.loading .panel-iframe {
  opacity: 0.1;
}

/* 플로팅 버튼 애니메이션 */
#floating-panel-btn {
  transition: transform 0.3s, box-shadow 0.3s;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1100;
  border-radius: 50%;
}

#floating-panel-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

#floating-panel-btn:active {
  transform: scale(0.95);
}

/* 호버시 패널 미리보기 효과 */
.draggable-panel:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* 패널 컨트롤 버튼 스타일 */
.panel-controls {
  display: flex;
  align-items: center;
}

.panel-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  color: var(--panel-header-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  transition: background-color 0.2s, transform 0.1s;
}

.panel-btn:hover {
  background-color: var(--panel-btn-hover);
  transform: scale(1.1);
}

.panel-btn:active {
  transform: scale(0.9);
}

.panel-close-btn:hover {
  background-color: #ff4a4a;
  color: white;
}

.draggable-panel.panel-moving .panel-btn {
  color: white;
}

.draggable-panel.panel-moving .panel-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

@keyframes panel-spinner {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* FAB 스피드 다이얼 스타일 */
.fab-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  height: 300px; /* 충분한 높이를 확보하여 버튼들이 위로 펼쳐질 공간 확보 */
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  pointer-events: none;
}

/* 메인 FAB 버튼 */
.fab-main {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1100;
  position: relative;
  transition: transform 0.3s, background-color 0.3s;
  pointer-events: auto;
}

.fab-main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.fab-main:active {
  transform: scale(0.95);
}

.fab-main.active {
  transform: rotate(45deg);
  background-color: #d62828;
}

/* 서브 FAB 버튼 */
.fab-sub-buttons {
  position: absolute;
  bottom: 70px; /* 메인 버튼 바로 위에 시작 */
  right: 5px; /* 우측 정렬 */
  display: flex;
  flex-direction: column; /* 세로 방향으로 변경 */
  align-items: flex-end; /* 오른쪽 정렬 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  pointer-events: auto;
}

.fab-container.open .fab-sub-buttons {
  opacity: 1;
  visibility: visible;
}

.fab-sub-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px; /* 세로 간격 추가 */
  margin-right: 0; /* 가로 간격 제거 */
  transform: translateY(20px); /* 시작 위치 아래쪽 조정 */
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}

.fab-container.open .fab-sub-item {
  transform: translateY(0);
  opacity: 1;
}

/* 각 서브 버튼 지연 애니메이션 - 순서 변경 */
.fab-container.open .fab-sub-item:nth-child(2) {
  transition-delay: 0.1s;
}

.fab-container.open .fab-sub-item:nth-child(1) {
  transition-delay: 0.05s;
}

@media (max-width: 576px) {
  .fab-sub-label {
    display: none; /* 모바일에서는 레이블 숨김 */
  }
  
  .fab-sub-item {
    margin-right: 8px;
  }
}

/* 서브 버튼 스타일 */
.fab-sub-button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--bg-color);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: transform 0.2s, background-color 0.2s;
}

.fab-sub-button:hover {
  background-color: var(--hover-color);
  transform: scale(1.1);
}

.fab-sub-button:active {
  transform: scale(0.95);
}

.fab-sub-button.panel-create {
  background-color: var(--success-color);
  color: white;
  width: 46px;
  height: 46px;
}

.fab-sub-button.panel-settings {
  background-color: var(--primary-color);
  color: white;
  width: 46px;
  height: 46px;
}

/* 서브 버튼 레이블 */
.fab-sub-label {
  background-color: var(--card-bg);
  padding: 6px 12px;
  border-radius: 4px;
  margin-right: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
}

/* 드래그 중인 패널 스타일 */
.draggable-panel.dragging {
  opacity: 0.6;
  border: 2px dashed var(--primary-color);
  cursor: grabbing; /* 드래그 중 커서 변경 */
}

/* 드롭 가능한 게시물 본문 영역 기본 스타일 */
.droppable-post-content {
  min-height: 50px; /* 드롭 영역 확보 */
  padding: 10px;
  border: 2px dashed transparent; /* 기본 상태에서는 테두리 숨김 */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  border-radius: 4px;
}

/* 드래그 요소가 위에 있을 때 드롭 영역 스타일 */
.droppable-post-content.drag-over {
  background-color: rgba(var(--bs-primary-rgb), 0.1); /* 부트스트랩 변수 활용 */
  border-color: var(--primary-color); /* 활성화된 테두리 */
}

/* 게시물 내에 삽입된 패널 스타일 */
.embedded-panel-in-post {
  margin: 20px 15px;
  padding: 0 15px;
  border: 3px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  outline: 1px solid #eee;
  background-color: #fff;
  overflow: hidden;
}

/* 삽입된 패널 링크 스타일 */
.embedded-panel-link {
  display: block;
  padding: 10px 15px;
  background-color: var(--bs-gray-200);
  border-radius: var(--bs-border-radius-sm);
  text-decoration: none;
  color: var(--bs-body-color);
  transition: background-color 0.15s ease-in-out;
  font-weight: 500;
}

.embedded-panel-link:hover {
  background-color: var(--bs-gray-300);
  color: var(--bs-body-color);
}

.embedded-panel-link i {
  vertical-align: middle;
}

.embedded-panel-link small {
  font-size: 0.85em;
}

/* 다크 모드용 삽입 패널 스타일 */
[data-theme="dark"] .embedded-panel-in-post {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .embedded-panel-link {
  background-color: var(--secondary-color);
  color: var(--text-color);
}

[data-theme="dark"] .embedded-panel-link:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}

/* 삽입된 패널 미리보기 컨테이너 */
.embedded-panel-preview {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}

.embedded-panel-preview:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 미리보기 헤더 */
.embedded-panel-header {
  padding: 6px 10px;
  background-color: var(--bs-gray-100);
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding-bottom: 2.5rem;
  min-height: 50px;
}

/* 미리보기 제목 링크 */
.embedded-panel-title {
  color: var(--bs-primary);
  text-decoration: none;
  font-weight: 500;
  display: block;
  font-size: 0.75rem;
}

.embedded-panel-title:hover {
  color: var(--bs-primary-darker);
  text-decoration: underline;
}

/* 미리보기 콘텐츠 영역 */
.embedded-panel-content {
  position: relative;
  height: 180px;
  background-color: #fff;
}

/* 미리보기 iframe */
.embedded-panel-content iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* 다크 모드 스타일 */
[data-theme="dark"] .embedded-panel-preview {
  border-color: var(--border-color);
}

[data-theme="dark"] .embedded-panel-header {
  background-color: var(--secondary-color);
  border-color: var(--border-color);
}

[data-theme="dark"] .embedded-panel-title {
  color: var(--primary-color);
}

[data-theme="dark"] .embedded-panel-content {
  background-color: var(--card-bg);
}

.embedded-panel-controls {
  display: flex;
  align-items: center;
  margin-left: auto;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.panel-action-btn {
  padding: 0.15rem 0.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.panel-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .panel-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 패널 제목 컨테이너 스타일 */
.panel-title-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-right: 10px;
  overflow: hidden;
}

/* 패널 제목 스타일 */
.panel-header-title {
  font-weight: 600;
  color: var(--panel-header-color);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
  text-align: center;
}

/* 원래 패널 제목 스타일 (작은 라벨) */
.panel-original-title {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* 기존 패널 제목 스타일 유지 (호환성) */
.panel-title {
  font-weight: 600;
  color: var(--panel-header-color);
  font-size: 0.8rem;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
  flex: 1;
  text-align: center;
}

/* 임베디드 패널 iframe 컨테이너 (상대 위치) */
.panel-iframe-container {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
}

/* 임베디드 패널 iframe */
.embedded-panel-iframe {
  display: block;
  border-radius: 0 0 5px 5px;
}

/* 오버레이 컨트롤 스타일 */
.panel-overlay-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* iframe 컨테이너에 호버시 컨트롤 보이게 */
.panel-iframe-container:hover .panel-overlay-controls {
  opacity: 1;
}

/* 오버레이 버튼 스타일 */
.panel-overlay-btn {
  padding: 3px 8px;
  font-size: 0.8rem;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 다크모드 스타일 */
.dark-mode .panel-overlay-controls {
  background-color: rgba(30, 30, 30, 0.7);
  padding: 5px;
  border-radius: 4px;
}

/* 임베디드 패널 스타일 */
.embedded-panel {
  margin: 20px 0;
  border: 3px solid #3498db;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background-color: #f8f9fa;
  position: relative;
}

/* 임베디드 패널 타이틀은 제거 (주석 처리) */
/* .embedded-panel .panel-title {
  background-color: #3498db;
  color: white;
  padding: 8px 15px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
} */

.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 비율 */
}

.embedded-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.overlay-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.iframe-container:hover .overlay-controls {
  opacity: 1;
}

.panel-restore-btn,
.panel-delete-btn {
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.panel-restore-btn:hover {
  background-color: #3498db;
  color: white;
}

.panel-delete-btn:hover {
  background-color: #e74c3c;
  color: white;
}

/* 토스트 메시지 스타일 */
.toast-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
}

.toast {
  background-color: rgba(52, 152, 219, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 4px;
  margin-top: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: fadeInOut 3s ease forwards;
  max-width: 300px;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(20px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* 웹패널 버튼 스타일 */
.embedded-panel-container .btn-primary,
.embedded-panel-container .btn-danger {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.embedded-panel-container .btn-primary:hover,
.embedded-panel-container .btn-danger:hover {
  opacity: 1;
}

/* 삽입된 웹패널 컨테이너 스타일 */
.embedded-panel-container {
  border: 3px solid #ccc !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  outline: 1px solid #eee;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.embedded-panel-container:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

.embedded-panel-iframe {
  border-radius: 5px !important;
}

/* 다크 모드 지원 */
[data-theme="dark"] .embedded-panel-container {
  border-color: #444 !important;
  outline-color: #333;
  background-color: #222;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 다크 모드에서 패널 본문 텍스트 스타일 */
[data-theme="dark"] .post-text, 
[data-theme="dark"] .comment-text,
[data-theme="dark"] .droppable-post-content {
  color: var(--text-color);
}

[data-theme="dark"] .delete-comment-btn {
  color: #ff6b6b;
}

[data-theme="dark"] .delete-comment-btn:hover {
  color: #ff8080;
}

/* 다크 모드에서 iframe 내용 적절히 표시 */
[data-theme="dark"] iframe {
  background-color: var(--card-bg);
}

/* 다크 모드에서 text-dark 클래스 오버라이드 개선 - 더 높은 우선순위 적용 */
[data-theme="dark"] a.text-dark,
[data-theme="dark"] .text-dark {
  color: var(--text-color) !important;
}

/* 다크 모드에서 navbar 메뉴 텍스트 */
[data-theme="dark"] .navbar .nav-link {
  color: var(--text-color);
}

[data-theme="dark"] .navbar .nav-link:hover {
  color: var(--primary-color);
}

/* 다크 모드에서 사이드바 링크 텍스트 */
[data-theme="dark"] .list-group-item a {
  color: var(--text-color) !important;
}

[data-theme="dark"] .list-group-item a:hover {
  color: var(--primary-color) !important;
}

/* 다크 모드에서 바로가기 아이콘 색상 */
[data-theme="dark"] .list-group-item a i.bi {
  color: var(--text-color) !important;
}

/* 다크 모드에서 친구추천 및 트렌드 텍스트 */
[data-theme="dark"] .card-title, 
[data-theme="dark"] .card-text, 
[data-theme="dark"] .text-muted {
  color: var(--text-color) !important;
}

/* 다크 모드에서 프로필 텍스트 */
[data-theme="dark"] #sidebar-profile h6,
[data-theme="dark"] #sidebar-profile p,
[data-theme="dark"] .profile-name,
[data-theme="dark"] .profile-username,
[data-theme="dark"] .profile-stat-number,
[data-theme="dark"] .profile-stat-label {
  color: var(--text-color);
}

/* 다크 모드에서 작은 텍스트와 아이콘 */
[data-theme="dark"] .bi, 
[data-theme="dark"] .small, 
[data-theme="dark"] small {
  color: var(--text-color);
}

/* 다크 모드에서 navbar toggler 아이콘 */
[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1);
}

/* 다크 모드에서 로그인 안내 등 추가 텍스트 영역 */
[data-theme="dark"] p, 
[data-theme="dark"] span,
[data-theme="dark"] div {
  color: var(--text-color);
}

/* 다크 모드에서 버튼 내 텍스트는 유지하되 text-dark 클래스가 있는 버튼 수정 */
[data-theme="dark"] .btn.text-dark {
  color: var(--text-color) !important;
  background-color: var(--secondary-color);
  border-color: var(--border-color);
}

/* 다크 모드에서 버튼 내 텍스트는 유지 */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-success {
  color: white;
}

[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-light {
  color: var(--text-color);
  border-color: var(--border-color);
}

/* 바로가기 메뉴 링크 다크 모드 수정 - 구체적인 선택자 사용 */
[data-theme="dark"] .list-group-item a.text-decoration-none.text-dark {
  color: var(--text-color) !important;
}

[data-theme="dark"] .list-group-item a.text-decoration-none.text-dark:hover {
  color: var(--primary-color) !important;
}

[data-theme="dark"] .list-group-item a.text-decoration-none.text-dark i.bi {
  color: var(--text-color) !important;
}

/* 바로가기 메뉴 그룹 다크 모드 수정 */
[data-theme="dark"] .list-group,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-item {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .list-group-item-action,
[data-theme="dark"] .dropdown-item {
  color: var(--text-color) !important;
}

[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--hover-color) !important;
  color: var(--primary-color) !important;
}

/* 메뉴 헤더도 다크모드 적용 */
[data-theme="dark"] .list-group-item-heading,
[data-theme="dark"] .dropdown-header {
  color: var(--text-color) !important;
}

/* 메뉴 구분선 다크모드 */
[data-theme="dark"] .dropdown-divider {
  border-color: var(--border-color) !important;
}

/* 다크 모드에서 이미지/동영상 업로드 버튼 스타일 */
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-light.btn-sm {
  color: var(--text-color) !important;
  background-color: var(--secondary-color) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light.btn-sm:hover {
  background-color: var(--hover-color) !important;
  color: var(--primary-color) !important;
}

/* 다크 모드에서 버튼 아이콘 색상 */
[data-theme="dark"] .btn-light i.bi,
[data-theme="dark"] .btn-light.btn-sm i.bi {
  color: var(--text-color) !important;
}

/* 다크 모드에서 모달 스타일링 */
[data-theme="dark"] .modal-content {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
  border-top-color: var(--border-color);
}

[data-theme="dark"] .modal-title {
  color: var(--text-color);
}

[data-theme="dark"] .form-label {
  color: var(--text-color);
}

[data-theme="dark"] .form-control {
  background-color: var(--secondary-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme="dark"] .form-control:focus {
  background-color: var(--secondary-color);
  border-color: var(--primary-color);
  color: var(--text-color);
  box-shadow: 0 0 0 0.25rem rgba(66, 103, 178, 0.25);
}

[data-theme="dark"] .form-check-label {
  color: var(--text-color);
}

/* 프로필 편집 모달 다크 모드 */
[data-theme="dark"] #profileModal .modal-content {
  background-color: var(--card-bg);
}

[data-theme="dark"] #profile-bio,
[data-theme="dark"] #profile-location,
[data-theme="dark"] #profile-website {
  background-color: var(--secondary-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] #profileModal .btn-close {
  filter: invert(1);
}

/* ---------- 채팅 관련 스타일 ---------- */
/* 채팅 메시지 기본 레이아웃 */
.chat-message {
  display: flex;
  margin-bottom: 4px;
  width: 100%;
}

/* 채팅 메시지 스타일 - 내 메시지(우측 정렬) */
.message-outgoing {
  justify-content: flex-end;
  align-self: flex-end;
  flex-direction: row-reverse;
}

.message-outgoing .message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 8px;
  margin-top: 0;
  margin-bottom: 0;
}

.message-outgoing .message-bubble {
  background-color: #DCF8C6; /* WhatsApp 스타일 녹색 */
  color: #000;
  border-radius: 7.5px 0 7.5px 7.5px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  border: none;
  text-align: left;
  direction: ltr;
  margin-right: 0;
}

.message-outgoing .message-time {
  text-align: right;
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  padding: 0 4px;
}

/* 채팅 메시지 스타일 - 상대방 메시지(좌측 정렬) */
.message-incoming {
  justify-content: flex-start;
  align-self: flex-start;
  flex-direction: row;
}

.message-incoming .message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 8px;
  margin-top: 0;
  margin-bottom: 0;
}

.message-incoming .message-bubble {
  background-color: #fff;
  color: #000;
  border-radius: 0 7.5px 7.5px 7.5px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  text-align: left;
  direction: ltr;
  margin-left: 0;
}

.message-incoming .message-time {
  text-align: left;
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  padding: 0 4px;
}

/* 채팅 아바타 스타일 */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 메시지 기본 스타일 */
.message-bubble {
  padding: 8px 12px;
  border-radius: 7.5px;
  display: inline-block;
  position: relative;
  max-width: 80vw; /* 페이지 너비의 80% */
  min-width: 50px;
  margin: 0;
  word-wrap: break-word;
  white-space: pre-wrap; /* 사용자 입력 줄바꿈 보존 */
  writing-mode: horizontal-tb !important;
}

/* 채팅 날짜 구분선 */
.chat-date-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 15px 0;
  height: 1px;
  background-color: #e0e0e0;
}

.chat-date-text {
  position: relative;
  padding: 0 10px;
  background-color: #E5DDD5; /* WhatsApp 스타일 배경에 맞춤 */
  font-size: 12px;
  color: #757575;
  margin: 0 auto;
}

.chat-message-group {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.chat-message-group .chat-message + .chat-message {
  margin-top: 2px;
  margin-bottom: 0;
}

/* 전체화면 채팅 UI 스타일 */
.whatsapp-style-chat {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-ui-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: #075E54; /* WhatsApp 스타일 헤더 */
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  min-height: 60px;
  z-index: 10;
}

.chat-ui-header h3 {
  flex: 1;
  margin: 0 15px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: white;
}

.chat-ui-header .btn-link {
  color: white;
}

/* 채팅 메시지 영역 배경색 */
.chat-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: #E5DDD5; /* WhatsApp 스타일 배경 */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAWdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjFMCKJsAAADZGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFCNUZENzg4NEQ3NzExRTlCQjkxOTE1MDBCQ0E0NEM0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFCNUZENzg5NEQ3NzExRTlCQjkxOTE1MDBCQ0E0NEM0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUI1RkQ3ODY0RDc3MTFFOUJCOTE5MTUwMEJDQTQ0QzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUI1RkQ3ODc0RDc3MTFFOUJCOTE5MTUwMEJDQTQ0QzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+6YmSAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAGLSURBVEhLtdVLK0RRGMbxcbkMFjbmrpBrblnYWFrIpYzEysLeskJKyUIWlJ048wEUZaG0YcvGwt7KJCnlFkr+r5mnzuEcfDwWv2YxzZ41Z2Yo+X5qm8hAOTy/p1XGAm7wgQeswHO9uBrwhlp4fuuSwgFO8IIHjCHmeolVYRdR2fA8LlYtoi5/nGIcbZiEdR8Pu7CbWH0Ylv98zCFjc4h5CXiW79iDXXyMWWRsKmJegl1YL3MRF2oPozDWI+Yl2IV1Pu1xsaaRsMmLeRZ2YcmC9TGCZmxiHK7j95lnYRfWr7AWbzCfzTwLu7ChHvFp6Yn1MaJHuA65C+tgxAXacAN7T+5bsJfW0Q1jhSOYL6Iu7DL2Tv0vDZ3QNzxwHK2Yz+cT9dDT/GS4j6C66Av2tCuWmwrMQh/Xz+I6G1EbdVoNvdpUXCymA3qnvRhBIlrhOhfTInbwYHCdPrMNfTVVr3CdLEi+YV2rE3PQCZv7FIOoxyhOoTUfsTsX1A9c675EF3zXA6sRHdD3XM0bKP0A8wnIcfOtHtcAAAAASUVORK5CYII="); /* WhatsApp 배경 패턴 */
  display: flex;
  flex-direction: column;
}

/* 다크모드에서의 WhatsApp 스타일 */
[data-theme="dark"] .chat-messages-area,
body.dark-mode .chat-messages-area {
  background-color: #0D1418; /* WhatsApp 다크모드 배경 */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAWdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjFMCKJsAAADZGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZCQjJEODkyMzFENDExRUE4RDMwQzA5QzlCMjBGRkQ0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZCQjJEODkzMzFENDExRUE4RDMwQzA5QzlCMjBGRkQ0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkJCMkQ4OTAzMUQ0MTFFQTREMA9DMDlDOUIyMEZGRDQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkJCMkQ4OTEzMUQ0MTFFQTREMA9DMDlDOUIyMEZGRDQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6BSMurAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAG0SURBVEhLtdXLK0VRFMbxgzxKkYGJKcqcgYHHQFGK4dRRZsqzDIzch3gMGSpJGXoM/AWYogjDZyADGSgDxbntb9Ve5ZzrUdf51Vfd9rr32uucKpQKB+lCA96RtJzrpYrHIS7wA8ue9ZJVi2VcJ+WsGFOeP9EJTOAdl1hHzPVi1WMXUVnwPC7WLKIuv+xiDmOYw7jneRa7iDWEYfnPxzwz1oWYl4BneY1DvCHmGhmrD9F1PWEbyxiC5/lcN7GXgF1YL3MVF2oHwzD6EfMSsAvrfDriYi3Cq9Uz5i40C6u/WETFNNiC5TrYz+wCdmGVDTzZNL7QiQb0YAPmc/oP8yzsIhERH6jCJsplCf8LdmE9LL7xC9/zTR1yF9ZBNGAaPRhEG+aCGMKH53muZmEX1qtci2toD+YpjqFv9YkJ2xsz2EB/vqxRHfSYV5nFzxDM25vVQD+HZXxjuSToG1/xPIvrXfwNZkVf1hP2e9yBmObojLtUoXpxhHeYNz/TVdhXVLnFTMrC5FvWa6T22Yx72Od9hE70YxK7UJsTeO5fOoXreUBfUn3P14xWFH4Bx5DIcbTJ/mcAAAAASUVORK5CYII="); /* WhatsApp 다크모드 배경 패턴 */
}

/* 채팅 UI 헤더 - WhatsApp 스타일 */
.chat-ui-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #075E54; /* WhatsApp 헤더 색상 */
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  min-height: 60px;
  z-index: 10;
}

/* 채팅 날짜 구분선 */
.chat-date-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 15px 0;
  height: 1px;
  background-color: transparent;
}

.chat-date-text {
  position: relative;
  padding: 5px 10px;
  background-color: #E9DDD5; /* WhatsApp 배경과 조화로운 색상 */
  font-size: 12.5px;
  color: #6B7A83;
  margin: 0 auto;
  border-radius: 7.5px;
}

[data-theme="dark"] .chat-date-text,
body.dark-mode .chat-date-text {
  background-color: #1e2a30;
  color: #86969f;
}

/* 채팅 입력 영역 - WhatsApp 스타일 */
.chat-input-area {
  background-color: #F0F0F0;
  border-top: 1px solid #E1E1E1;
  padding: 8px 10px;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* 채팅 툴바 스타일 */
.chat-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* 채팅 입력창 래퍼 */
.chat-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #FFF;
  border-radius: 24px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 채팅 입력창 */
.chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 6px 10px;
  font-size: 15px;
  font-family: inherit;
  color: #333;
  min-height: 24px;
  max-height: 100px;
  overflow-y: auto;
  resize: none; /* 수동 리사이즈 제거 */
  line-height: 1.4;
  white-space: pre-wrap; /* 줄바꿈 유지 */
  word-break: break-word; /* 긴 단어 처리 */
}

/* 채팅 도구 버튼 (이모티콘 등) */
.chat-tool-btn {
  color: #919191;
  font-size: 22px;
  padding: 0;
  margin: 0 8px 0 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.chat-tool-btn:hover {
  color: #009688;
}

/* 전송 버튼 */
.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #00A884;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: 8px;
  padding: 0;
}

.chat-send-btn:hover {
  background-color: #008F73;
}

.chat-send-btn i {
  font-size: 18px;
}

/* 다크모드 채팅 입력 스타일 */
[data-theme="dark"] .chat-input-area,
body.dark-mode .chat-input-area {
  background-color: #1F2C33;
  border-color: #2A3942;
}

[data-theme="dark"] .chat-input-wrapper,
body.dark-mode .chat-input-wrapper {
  background-color: #2A3942;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .chat-input,
body.dark-mode .chat-input {
  color: #E4E6EB;
}

[data-theme="dark"] .chat-tool-btn,
body.dark-mode .chat-tool-btn {
  color: #8696A0;
}

[data-theme="dark"] .chat-tool-btn:hover,
body.dark-mode .chat-tool-btn:hover {
  color: #00A884;
}

[data-theme="dark"] .chat-send-btn,
body.dark-mode .chat-send-btn {
  background-color: #00A884;
}

/* 메시지 그룹이 연속되는 경우 아바타 표시 및 여백 조정 */
.chat-message-group .chat-message + .chat-message {
  margin-top: 4px;
}

/* 채팅 메시지 그룹화 스타일 */
.chat-message-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  width: 100%;
}

/* 로딩 인디케이터 */
.chat-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 100px;
}

/* 메시지 없음 상태 */
.no-messages {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  text-align: center;
  color: #888;
  font-size: 0.9rem;
}

/* 메시지 텍스트 스타일 */
.message-text {
  display: inline;
  width: 100%;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
  white-space: pre-wrap; /* 사용자 입력 줄바꿈 보존 */
  word-break: break-word;
  text-align: left !important;
  direction: ltr !important;
  margin: 0;
  padding: 0;
}

/* 모바일 환경에서 메시지 정렬 추가 설정 */
@media screen and (max-width: 768px) {
  .message-bubble {
    max-width: 80vw; /* 페이지 너비의 80% */
  }
  
  .message-text {
    font-size: 14px;
    white-space: normal;
  }
}

/* 로딩 인디케이터 */
.chat-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 100px;
}

/* 기본 버튼 스타일 */
.chat-send-btn:hover {
  color: #3d8b40;
}

.chat-send-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

/* 다크 모드 확장 */
body.dark-mode .chat-date-divider,
[data-theme="dark"] .chat-date-divider {
  background-color: #444;
}

body.dark-mode .chat-date-text,
[data-theme="dark"] .chat-date-text {
  background-color: #0D1418;
  color: #ccc;
}

body.dark-mode .chat-messages-area,
[data-theme="dark"] .chat-messages-area,
body.dark-mode .chat-messages,
[data-theme="dark"] .chat-messages {
  background-color: #1e1e1e;
}

body.dark-mode .chat-input-area,
[data-theme="dark"] .chat-input-area {
  background-color: #252525;
  border-color: #333;
}

body.dark-mode .chat-input-wrapper,
[data-theme="dark"] .chat-input-wrapper {
  background-color: #333;
}

body.dark-mode .chat-input,
[data-theme="dark"] .chat-input {
  color: #fff;
}

/* 다크 모드 조정 */
[data-theme="dark"] .message-outgoing .message-bubble,
body.dark-mode .message-outgoing .message-bubble {
  background-color: #056162; /* 다크모드 WhatsApp 스타일 */
  color: #fff;
}

[data-theme="dark"] .message-incoming .message-bubble,
body.dark-mode .message-incoming .message-bubble {
  background-color: #262d31;
  color: #fff;
  border: none;
}

/* 다크모드 채팅 메시지 영역 */
body.dark-mode .chat-messages-area,
[data-theme="dark"] .chat-messages-area {
  background-color: #0D1418; /* WhatsApp 다크모드 배경 */
}

/* 다크모드 헤더 */
body.dark-mode .chat-ui-header,
[data-theme="dark"] .chat-ui-header {
  background-color: #1F2C33;
}

/* 채팅 메시지 영역 - WhatsApp 스타일 */
.chat-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: #E5DDD5; /* WhatsApp 기본 배경색 */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAWdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjFMCKJsAAADZGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFCNUZENzg4NEQ3NzExRTlCQjkxOTE1MDBCQ0E0NEM0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFCNUZENzg5NEQ3NzExRTlCQjkxOTE1MDBCQ0E0NEM0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QUI1RkQ3ODY0RDc3MTFFOUJCOTE5MTUwMEJDQTQ0QzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QUI1RkQ3ODc0RDc3MTFFOUJCOTE5MTUwMEJDQTQ0QzQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+6YmSAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAGLSURBVEhLtdVLK0RRGMbxcbkMFjbmrpBrblnYWFrIpYzEysLeskJKyUIWlJ048wEUZaG0YcvGwt7KJCnlFkr+r5mnzuEcfDwWv2YxzZ41Z2Yo+X5qm8hAOTy/p1XGAm7wgQeswHO9uBrwhlp4fuuSwgFO8IIHjCHmeolVYRdR2fA8LlYtoi5/nGIcbZiEdR8Pu7CbWH0Ylv98zCFjc4h5CXiW79iDXXyMWWRsKmJegl1YL3MRF2oPozDWI+Yl2IV1Pu1xsaaRsMmLeRZ2YcmC9TGCZmxiHK7j95lnYRfWr7AWbzCfzTwLu7ChHvFp6Yn1MaJHuA65C+tgxAXacAN7T+5bsJfW0Q1jhSOYL6Iu7DL2Tv0vDZ3QNzxwHK2Yz+cT9dDT/GS4j6C66Av2tCuWmwrMQh/Xz+I6G1EbdVoNvdpUXCymA3qnvRhBIlrhOhfTInbwYHCdPrMNfTVVr3CdLEi+YV2rE3PQCZv7FIOoxyhOoTUfsTsX1A9c675EF3zXA6sRHdD3XM0bKP0A8wnIcfOtHtcAAAAASUVORK5CYII="); /* WhatsApp 배경 패턴 */
  display: flex;
  flex-direction: column;
}

/* 다크모드에서의 WhatsApp 스타일 */
[data-theme="dark"] .chat-messages-area,
body.dark-mode .chat-messages-area {
  background-color: #0D1418; /* WhatsApp 다크모드 배경 */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAWdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjFMCKJsAAADZGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkZCQjJEODkyMzFENDExRUE4RDMwQzA5QzlCMjBGRkQ0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkZCQjJEODkzMzFENDExRUE4RDMwQzA5QzlCMjBGRkQ0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkJCMkQ4OTAzMUQ0MTFFQTREMA9DMDlDOUIyMEZGRDQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkJCMkQ4OTEzMUQ0MTFFQTREMA9DMDlDOUIyMEZGRDQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6BSMurAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAAG0SURBVEhLtdXLK0VRFMbxgzxKkYGJKcqcgYHHQFGK4dRRZsqzDIzch3gMGSpJGXoM/AWYogjDZyADGSgDxbntb9Ve5ZzrUdf51Vfd9rr32uucKpQKB+lCA96RtJzrpYrHIS7wA8ue9ZJVi2VcJ+WsGFOeP9EJTOAdl1hHzPVi1WMXUVnwPC7WLKIuv+xiDmOYw7jneRa7iDWEYfnPxzwz1oWYl4BneY1DvCHmGhmrD9F1PWEbyxiC5/lcN7GXgF1YL3MVF2oHwzD6EfMSsAvrfDriYi3Cq9Uz5i40C6u/WETFNNiC5TrYz+wCdmGVDTzZNL7QiQb0YAPmc/oP8yzsIhERH6jCJsplCf8LdmE9LL7xC9/zTR1yF9ZBNGAaPRhEG+aCGMKH53muZmEX1qtci2toD+YpjqFv9YkJ2xsz2EB/vqxRHfSYV5nFzxDM25vVQD+HZXxjuSToG1/xPIvrXfwNZkVf1hP2e9yBmObojLtUoXpxhHeYNz/TVdhXVLnFTMrC5FvWa6T22Yx72Od9hE70YxK7UJsTeO5fOoXreUBfUn3P14xWFH4Bx5DIcbTJ/mcAAAAASUVORK5CYII="); /* WhatsApp 다크모드 배경 패턴 */
}

/* 채팅 메시지 컨테이너 */
.chat-message-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 채팅 메시지 스타일 */
.chat-message {
  display: flex;
  margin-bottom: 8px;
  width: 100%;
}

/* 채팅 메시지 스타일 - 내 메시지(우측 정렬) */
.message-outgoing {
  justify-content: flex-end;
  align-self: flex-end;
  flex-direction: row;
}

.message-outgoing .message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 8px;
  margin-top: 0;
  margin-bottom: 0;
}

.message-outgoing .message-bubble {
  background-color: #DCF8C6;
  color: #000;
  border-radius: 7.5px 0 7.5px 7.5px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  text-align: left;
  direction: ltr;
  margin-right: 0;
}

.message-outgoing .message-time {
  text-align: right;
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  padding: 0 4px;
}

/* 채팅 메시지 스타일 - 상대방 메시지(좌측 정렬) */
.message-incoming {
  justify-content: flex-start;
  align-self: flex-start;
  flex-direction: row;
}

.message-incoming .message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 8px;
  margin-top: 0;
  margin-bottom: 0;
}

.message-incoming .message-bubble {
  background-color: #fff;
  color: #000;
  border-radius: 0 7.5px 7.5px 7.5px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
  text-align: left;
  direction: ltr;
  margin-left: 0;
}

.message-incoming .message-time {
  text-align: left;
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  padding: 0 4px;
}

/* 채팅 아바타 스타일 */
.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 메시지 버블 스타일 */
.message-bubble {
  padding: 8px 12px;
  border-radius: 7.5px;
  display: inline-block;
  position: relative;
  max-width: 80vw; /* 페이지 너비의 80% */
  min-width: 50px;
  margin: 0;
  word-wrap: break-word;
  white-space: pre-wrap; /* 내부 콘텐츠의 줄바꿈 유지 */
  writing-mode: horizontal-tb !important;
}

/* 채팅 UI 헤더 - WhatsApp 스타일 */
.chat-ui-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: #075E54; /* WhatsApp 헤더 색상 */
  color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  min-height: 60px;
  z-index: 10;
}

/* 채팅 날짜 구분선 */
.chat-date-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 15px 0;
  height: 1px;
  background-color: transparent;
}

.chat-date-text {
  position: relative;
  padding: 5px 10px;
  background-color: #E9DDD5; /* WhatsApp 배경과 조화로운 색상 */
  font-size: 12.5px;
  color: #6B7A83;
  margin: 0 auto;
  border-radius: 7.5px;
}

[data-theme="dark"] .chat-date-text,
body.dark-mode .chat-date-text {
  background-color: #1e2a30;
  color: #86969f;
}

/* 채팅 입력 영역 - WhatsApp 스타일 */
.chat-input-area {
  background-color: #F0F0F0;
  border-top: 1px solid #E1E1E1;
  padding: 8px 10px;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

/* 채팅 툴바 스타일 */
.chat-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* 채팅 입력창 래퍼 */
.chat-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #FFF;
  border-radius: 24px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 채팅 입력창 */
.chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 6px 10px;
  font-size: 15px;
  font-family: inherit;
  color: #333;
  min-height: 24px;
  max-height: 100px;
  overflow-y: auto;
  resize: none; /* 수동 리사이즈 제거 */
  line-height: 1.4;
  white-space: pre-wrap; /* 줄바꿈 유지 */
  word-break: break-word; /* 긴 단어 처리 */
}

/* 채팅 도구 버튼 (이모티콘 등) */
.chat-tool-btn {
  color: #919191;
  font-size: 22px;
  padding: 0;
  margin: 0 8px 0 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}

.chat-tool-btn:hover {
  color: #009688;
}

/* 전송 버튼 */
.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #00A884;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-left: 8px;
  padding: 0;
}

.chat-send-btn:hover {
  background-color: #008F73;
}

.chat-send-btn i {
  font-size: 18px;
}

/* 다크모드 채팅 입력 스타일 */
[data-theme="dark"] .chat-input-area,
body.dark-mode .chat-input-area {
  background-color: #1F2C33;
  border-color: #2A3942;
}

[data-theme="dark"] .chat-input-wrapper,
body.dark-mode .chat-input-wrapper {
  background-color: #2A3942;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .chat-input,
body.dark-mode .chat-input {
  color: #E4E6EB;
}

[data-theme="dark"] .chat-tool-btn,
body.dark-mode .chat-tool-btn {
  color: #8696A0;
}

[data-theme="dark"] .chat-tool-btn:hover,
body.dark-mode .chat-tool-btn:hover {
  color: #00A884;
}

[data-theme="dark"] .chat-send-btn,
body.dark-mode .chat-send-btn {
  background-color: #00A884;
}

/* 메시지 텍스트 스타일 */
.message-text {
  display: inline;
  width: 100%;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
  white-space: pre-wrap; /* 사용자 입력 줄바꿈 보존 */
  word-break: break-word;
  text-align: left !important;
  direction: ltr !important;
  margin: 0;
  padding: 0;
}

/* 다크모드 메시지 스타일 */
[data-theme="dark"] .message-outgoing .message-bubble,
body.dark-mode .message-outgoing .message-bubble {
  background-color: #056162;
  color: white;
}

[data-theme="dark"] .message-incoming .message-bubble,
body.dark-mode .message-incoming .message-bubble {
  background-color: #262d31;
  border: none;
  color: white;
}

/* 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {
  .message-bubble {
    max-width: 80vw; /* 페이지 너비의 80% */
  }
  
  .message-text {
    font-size: 14px;
    white-space: normal;
  }
}

/* 메시지 수정/삭제 버튼 스타일 */
.message-actions {
  display: none;
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message-bubble:hover .message-actions {
  display: flex;
  gap: 5px;
}

.btn-message-edit,
.btn-message-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  font-size: 0.8rem;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: background-color 0.2s;
}

.btn-message-edit {
  color: #4a8fe7;
}

.btn-message-delete {
  color: #e74c3c;
}

.btn-message-edit:hover {
  background-color: rgba(74, 143, 231, 0.1);
}

.btn-message-delete:hover {
  background-color: rgba(231, 76, 60, 0.1);
}

/* 삭제된 메시지 스타일 */
.message-bubble.deleted .message-text {
  color: #888;
  font-style: italic;
}

.message-edited {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.5);
  margin-left: 5px;
}

.dark-mode .message-edited {
  color: rgba(255, 255, 255, 0.5);
}

/* 삭제된 메시지 스타일 */
[data-theme="dark"] .message-actions,
.dark-mode .message-actions {
  background-color: rgba(40, 40, 40, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .btn-message-edit,
.dark-mode .btn-message-edit {
  color: #65a9ff;
}

[data-theme="dark"] .btn-message-delete,
.dark-mode .btn-message-delete {
  color: #ff6b6b;
}

[data-theme="dark"] .btn-message-edit:hover,
.dark-mode .btn-message-edit:hover {
  background-color: rgba(101, 169, 255, 0.2);
}

[data-theme="dark"] .btn-message-delete:hover,
.dark-mode .btn-message-delete:hover {
  background-color: rgba(255, 107, 107, 0.2);
}

/* 글씨 크기 조절 스타일 */
body.font-size-normal {
  font-size: 1rem;
}

body.font-size-large {
  font-size: 1.125rem;
}

body.font-size-larger {
  font-size: 1.25rem;
}

body.font-size-largest {
  font-size: 1.375rem;
}

body.font-size-huge {
  font-size: 1.5rem;
}

.font-size-control {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.font-size-control .size-btn {
  margin: 0 2px;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 3px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.font-size-control .size-btn.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.font-size-control .size-label {
  margin-right: 5px;
  font-size: 12px;
  color: #6c757d;
}

/* 설정 모달 스타일 */
.settings-modal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

.settings-modal .nav-tabs .nav-link {
  color: #495057;
  background-color: transparent;
  border-color: transparent;
  padding: 0.75rem 1rem;
}

.settings-modal .nav-tabs .nav-link.active {
  color: #007bff;
  background-color: #f8f9fa;
  border-color: #dee2e6 #dee2e6 #fff;
}

.settings-modal .tab-content {
  padding: 20px 10px;
}

.settings-modal .form-group {
  margin-bottom: 1.5rem;
}

.settings-modal .form-check {
  margin-bottom: 0.5rem;
}

.settings-tab-icon {
  margin-right: 8px;
}

.cloud-message-test-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 15px auto;
}

.cloud-message-test-btn i {
  margin-right: 8px;
}

.settings-btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.cache-btn, .reset-btn {
  width: 48%;
}

/* 다크 모드 설정 모달 스타일 */
body.dark-mode .settings-modal .modal-content {
  background-color: #343a40;
  color: #f8f9fa;
}

body.dark-mode .settings-modal .modal-header {
  border-bottom-color: #495057;
}

body.dark-mode .settings-modal .modal-footer {
  border-top-color: #495057;
}

body.dark-mode .settings-modal .nav-tabs .nav-link {
  color: #adb5bd;
}

body.dark-mode .settings-modal .nav-tabs .nav-link.active {
  color: #fff;
  background-color: #495057;
  border-color: #6c757d #6c757d #495057;
}

body.dark-mode .settings-modal .form-control {
  background-color: #495057;
  border-color: #6c757d;
  color: #f8f9fa;
}

body.dark-mode .settings-modal .form-control:focus {
  background-color: #495057;
  color: #f8f9fa;
}

body.dark-mode .settings-modal .form-select {
  background-color: #495057;
  border-color: #6c757d;
  color: #f8f9fa;
}

body.dark-mode .settings-modal .btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}

body.dark-mode .settings-modal .btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

body.dark-mode .settings-modal .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

body.dark-mode .settings-modal .btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}

/* 폼 스위치 스타일 */
.form-switch {
  padding-left: 2.5em;
}

.form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-position: left center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  -webkit-appearance: none;
  appearance: none;
}

.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-color: #0d6efd;
}

body.dark-mode .form-switch .form-check-input {
  background-color: #495057;
  border-color: #6c757d;
}

body.dark-mode .form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}

/* 버전 정보 표시 스타일 */
.version-info {
  font-size: 0.75rem;
  color: #6c757d;
  padding: 0.25rem 0;
  border-top: 1px solid #dee2e6;
  background-color: #f8f9fa;
}

/* 다크 모드에서의 버전 정보 스타일 */
body.dark-mode .version-info {
  background-color: #343a40;
  color: #adb5bd;
  border-top-color: #495057;
}

/* 채팅방 설정 관련 스타일 - 3065줄 근처에 추가 */
.chat-notification-toggle {
  color: white;
  font-size: 20px;
  transition: transform 0.2s, color 0.2s;
  padding: 5px;
  border-radius: 50%;
  margin-right: 8px;
}

.chat-notification-toggle:hover {
  transform: scale(1.1);
  color: #f1f1f1;
}

.chat-notification-toggle i {
  display: block;
  transition: all 0.2s;
}

.chat-notification-toggle i.bi-bell-slash {
  color: #ffc107;
}

[data-theme="dark"] .chat-notification-toggle,
body.dark-mode .chat-notification-toggle {
  color: #f1f1f1;
}

[data-theme="dark"] .chat-notification-toggle:hover,
body.dark-mode .chat-notification-toggle:hover {
  color: #ffffff;
}

[data-theme="dark"] .chat-notification-toggle i.bi-bell-slash,
body.dark-mode .chat-notification-toggle i.bi-bell-slash {
  color: #ffc107;
}

/* FCM 알림 토스트 스타일 */
.fcm-toast-container {
  z-index: 1070;
  max-width: 350px;
  padding: 0.25rem; /* 상하좌우 패딩 모두 감소 */
}

.fcm-toast-container .toast {
  margin-bottom: 0.25rem; /* 토스트 간 간격 줄임 */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  opacity: 1;
  border: none;
  border-radius: 0.25rem;
  overflow: hidden;
  transition: opacity 0.3s ease-out;
}

.fcm-toast-container .toast.fade {
  opacity: 0;
}

.fcm-toast-container .toast-header {
  padding: 0.2rem 0.5rem; /* 헤더 패딩 감소 */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  min-height: 30px; /* 최소 높이 설정으로 너무 작아지지 않도록 */
}

.fcm-toast-container .toast-body {
  padding: 0.3rem 0.5rem; /* 본문 패딩 감소 */
  font-size: 0.875rem;
  word-break: break-word;
  max-height: 60px; /* 최대 높이도 줄임 */
  overflow-y: auto;
  line-height: 1.2; /* 줄 간격 줄임 */
}

/* 다크 모드에서의 FCM 토스트 스타일 */
body.dark-mode .fcm-toast-container .toast {
  background-color: #343a40;
  color: #f8f9fa;
}

body.dark-mode .fcm-toast-container .toast-header {
  background-color: #0d6efd;
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .fcm-toast-container .toast-body {
  background-color: #343a40;
  color: #f8f9fa;
}

/* 애니메이션 효과 */
.fcm-toast-container .toast {
  animation: fcm-toast-slide-in 0.3s ease-out;
}

@keyframes fcm-toast-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 권한 관리 모달 스타일 */
.permission-item {
  background-color: #f8f9fa;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.permission-item:hover {
  background-color: #e9ecef;
}

.delete-permission-btn {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.permission-item:hover .delete-permission-btn {
  opacity: 1;
}

/* 다크모드 권한 관리 모달 스타일 */
[data-theme="dark"] .permission-item,
body.dark-mode .permission-item {
  background-color: #212529;
  border-color: #495057;
}

[data-theme="dark"] .permission-item:hover,
body.dark-mode .permission-item:hover {
  background-color: #343a40;
}

[data-theme="dark"] .permissions-list,
body.dark-mode .permissions-list {
  color: #e9ecef;
}

[data-theme="dark"] .permissions-form .form-control,
body.dark-mode .permissions-form .form-control {
  background-color: #343a40;
  border-color: #495057;
  color: #e9ecef;
}

[data-theme="dark"] .permissions-form .form-select,
body.dark-mode .permissions-form .form-select {
  background-color: #343a40;
  border-color: #495057;
  color: #e9ecef;
}

/* 이미지 정보 패널 스타일 */
.image-info-container {
  margin-top: 8px;
  margin-bottom: 16px;
}

.image-info-container .btn {
  border-radius: 4px;
  text-align: left;
  padding: 8px 12px;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.image-info-container .btn i.bi-chevron-down {
  transition: transform 0.3s;
}

.image-info-container .btn[aria-expanded="true"] i.bi-chevron-down {
  transform: rotate(180deg);
}

.image-info-container .collapse {
  transition: height 0.3s ease-out;
}

.image-info-container .card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

.image-info-container .list-group-item {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.image-info-container .text-truncate {
  max-width: 200px;
}

/* 다크 모드에서의 이미지 정보 패널 */
[data-theme="dark"] .image-info-container .btn,
body.dark-mode .image-info-container .btn {
  background-color: #3A3B3C;
  border-color: #4E4F50;
  color: #E4E6EB;
}

[data-theme="dark"] .image-info-container .btn:hover,
body.dark-mode .image-info-container .btn:hover {
  background-color: #4E4F50;
}

[data-theme="dark"] .image-info-container .card,
body.dark-mode .image-info-container .card {
  background-color: #242526 !important;
  border-color: #3E4042;
}

[data-theme="dark"] .image-info-container .list-group-item,
body.dark-mode .image-info-container .list-group-item {
  background-color: #242526 !important;
  color: #E4E6EB;
  border-color: #3E4042;
}

[data-theme="dark"] .image-info-container .text-warning,
body.dark-mode .image-info-container .text-warning {
  color: #FFD580 !important;
}

/* Driver.js 투어 가이드 스타일 */
.driver-overlay {
  opacity: 0.6 !important;
}

.sns-tour-popover.driver-popover {
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  padding: 16px;
  max-width: 400px;
  font-family: inherit;
}

.driver-popover-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.driver-popover-description {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.driver-popover-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.driver-popover-footer button {
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.driver-popover-footer .driver-next-btn {
  background-color: #3B5998;
  color: #fff;
  border: none;
}

.driver-popover-footer .driver-next-btn:hover {
  background-color: #2d4373;
}

.driver-popover-footer .driver-prev-btn {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #e0e0e0;
}

.driver-popover-footer .driver-prev-btn:hover {
  background-color: #e0e0e0;
}

.driver-popover-footer .driver-close-btn {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}

.driver-popover-footer .driver-close-btn:hover {
  background-color: #e5e5e5;
}

.driver-popover-arrow {
  border-width: 8px;
}

.driver-popover-progress-text {
  font-size: 12px;
  color: #777;
}

/* 다크 모드에서의 투어 가이드 스타일 */
[data-theme="dark"] .driver-popover-footer .driver-next-btn,
body.dark-mode .driver-popover-footer .driver-next-btn {
  background-color: #4267B2;
}

[data-theme="dark"] .driver-popover-footer .driver-next-btn:hover,
body.dark-mode .driver-popover-footer .driver-next-btn:hover {
  background-color: #365899;
}

[data-theme="dark"] .driver-popover-footer .driver-prev-btn,
body.dark-mode .driver-popover-footer .driver-prev-btn {
  background-color: #3A3B3C;
  color: #E4E6EB;
  border-color: #4E4F50;
}

[data-theme="dark"] .driver-popover-footer .driver-prev-btn:hover,
body.dark-mode .driver-popover-footer .driver-prev-btn:hover {
  background-color: #4E4F50;
}

[data-theme="dark"] .driver-popover-footer .driver-close-btn,
body.dark-mode .driver-popover-footer .driver-close-btn {
  background-color: #3A3B3C;
  color: #E4E6EB;
  border-color: #4E4F50;
}

[data-theme="dark"] .driver-popover-footer .driver-close-btn:hover,
body.dark-mode .driver-popover-footer .driver-close-btn:hover {
  background-color: #4E4F50;
}

/* 모바일 화면에서의 네비게이션 바 최적화 */
@media (max-width: 991.98px) {
  /* 사용자 프로필과 로그인 섹션이 항상 표시되도록 설정 */
  #user-profile, #login-section {
    display: flex !important;
    align-items: center;
  }
  
  /* 작은 화면에서 아바타 크기 조정 */
  #user-avatar {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* 버튼 패딩 조정 */
  #logout-btn, #login-btn, #theme-toggle {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  /* 브랜드 로고 패딩 조정 */
  .navbar-brand {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin-right: 0.5rem;
  }
}

/* 더 작은 모바일 화면에서의 추가 최적화 */
@media (max-width: 575.98px) {
  /* 작은 화면에서는 사용자 이름과 버튼 텍스트 숨김 */
  #user-name, #logout-btn span, #login-btn span {
    display: none;
  }
  
  /* 버튼 간격 조정 */
  #user-avatar {
    margin-right: 0.3rem !important;
  }
  
  /* 테마 토글 버튼 패딩과 폰트 크기 조정 */
  #theme-toggle {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
  }
}

/* 버전 정보 스타일 */
.version-info {
  transition: color 0.3s ease;
}

/* 다크모드 버전 정보 스타일 */
[data-theme="dark"] .version-info,
body.dark-mode .version-info {
  background-color: #1E1E1E;
  color: #E4E6EB;
}

[data-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

[data-theme="dark"] footer {
  background-color: #1E1E1E;
  border-top: 1px solid #333;
}

/* 다크모드에서 흰색 텍스트 투명도 설정 */
[data-theme="dark"] .text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 회전 애니메이션 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
  display: inline-block;
}

/* 버전 정보 스타일 */
.panel-manager-menu {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 300px;
  background-color: var(--card-bg);
  border: 1px solid var(--panel-border-color);
  border-radius: 8px;
  box-shadow: var(--panel-shadow);
  z-index: 1050;
  overflow: hidden;
  transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
  /* 기본 상태에서는 메뉴가 숨겨지도록 설정 */
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
}

/* show 클래스가 추가될 때만 메뉴가 표시되도록 설정 */
.panel-manager-menu.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* 패널 관리 버튼 숨김 (FAB으로 대체) */
.panel-manager-trigger {
  display: none;
}

/* 패널 관리자 헤더 스타일 */
.panel-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--panel-header-bg);
  border-bottom: 1px solid var(--panel-border-color);
}

.panel-manager-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--panel-header-color);
}

.panel-manager-close {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--panel-header-color);
  transition: background-color 0.2s, color 0.2s;
}

.panel-manager-close:hover {
  background-color: rgba(255, 74, 74, 0.1);
  color: #ff4a4a;
}

/* 패널 관리자 컨텐츠 영역 */
.panel-manager-content {
  padding: 12px;
  max-height: 400px;
  overflow-y: auto;
}

/* 패널 관리자 섹션 스타일 */
.panel-manager-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--panel-border-color);
}

.panel-manager-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.panel-manager-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--panel-header-color);
}

.panel-manager-section-description {
  font-size: 0.85rem;
  color: var(--comment-color);
  margin-bottom: 12px;
}

/* 패널 관리자 버튼 스타일 */
.panel-manager-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  background-color: var(--bg-color);
  border: 1px solid var(--panel-border-color);
  border-radius: 4px;
  color: var(--text-color);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  margin-bottom: 8px;
}

.panel-manager-button:last-child {
  margin-bottom: 0;
}

.panel-manager-button:hover {
  background-color: var(--hover-color);
  transform: translateY(-1px);
}

.panel-manager-button:active {
  transform: translateY(1px);
}

.panel-manager-button i {
  margin-right: 8px;
}

.panel-manager-button.primary {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.panel-manager-button.primary:hover {
  background-color: #365899;
}

.panel-manager-button.danger {
  background-color: rgba(255, 74, 74, 0.1);
  color: #ff4a4a;
  border-color: rgba(255, 74, 74, 0.2);
}

.panel-manager-button.danger:hover {
  background-color: rgba(255, 74, 74, 0.2);
}

/* 파일 입력 숨김 */
.file-input-hidden {
  display: none;
}

/* 반응형 조정 - 모바일 지원 */
@media (max-width: 576px) {
  .fab-sub-label {
    display: none; /* 모바일에서는 레이블 숨김 */
  }
  
  .fab-sub-item {
    margin-bottom: 10px; /* 모바일에서는 간격 줄임 */
  }
}

/* 서브 버튼 스타일 */
.fab-sub-button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--bg-color);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: transform 0.2s, background-color 0.2s;
}

/* 기기 목록 FAB 버튼 */
.fab-device-container {
  position: fixed;
  bottom: 20px;
  right: 90px; /* 기존 FAB 버튼 오른쪽에 위치 */
  z-index: 1000;
  height: 300px;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  pointer-events: none;
}

.fab-device-main {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #28a745; /* 초록색 계열로 구분 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1100;
  position: relative;
  transition: transform 0.3s, background-color 0.3s;
  pointer-events: auto;
}

.fab-device-main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.fab-device-main:active {
  transform: scale(0.95);
}

.fab-device-main.active {
  transform: rotate(45deg);
  background-color: #1e7e34;
}

[data-theme="dark"] .fab-device-main {
  background-color: #2fb344;
}

[data-theme="dark"] .fab-device-main:hover {
  background-color: #3cc454;
}

[data-theme="dark"] .fab-device-main.active {
  background-color: #218838;
}

/* 파일 첨부 관련 스타일 */
.chat-file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--hover-color);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 8px 10px;
  position: relative;
}

.chat-file-preview.with-preview {
  padding-top: 100px;
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}

.file-icon {
  font-size: 1.5rem;
  margin-right: 10px;
  color: var(--primary-color);
}

.file-details {
  overflow: hidden;
}

.file-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.file-size {
  font-size: 0.75rem;
  color: var(--comment-color);
}

.btn-remove-file {
  background: none;
  border: none;
  color: var(--comment-color);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0;
  margin-left: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.btn-remove-file:hover {
  opacity: 1;
}

/* 메시지 내의 파일 표시 스타일 */
.message-file {
  margin-top: 4px;
  border-radius: 6px;
  overflow: hidden;
  max-width: 300px;
  background-color: rgba(0, 0, 0, 0.05);
}

.message-file.image-file {
  padding: 0;
}

.message-outgoing .message-file {
  background-color: rgba(255, 255, 255, 0.1);
}

.message-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: filter 0.2s;
}

.message-image:hover {
  filter: brightness(0.9);
}

/* 이미지 모달 스타일 */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-modal.show {
  display: flex;
  opacity: 1;
}

.image-modal-content {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 30px;
  cursor: pointer;
  z-index: 2010;
}

.message-video, .message-audio {
  width: 100%;
  max-width: 300px;
  border-radius: 6px;
  margin-bottom: 4px;
}

.file-preview-link, .file-download-link {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 8px;
}

.file-preview-link:hover, .file-download-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.file-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.05);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 10px;
}

.file-preview .file-icon {
  font-size: 1.5rem;
  margin: 0;
}

.file-download-link {
  display: flex;
  align-items: center;
}

/* 다크 모드 스타일 */
[data-theme="dark"] .chat-file-preview, 
body.dark-mode .chat-file-preview {
  background-color: var(--secondary-color);
}

[data-theme="dark"] .message-file, 
body.dark-mode .message-file {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .file-preview-link:hover, 
[data-theme="dark"] .file-download-link:hover,
body.dark-mode .file-preview-link:hover, 
body.dark-mode .file-download-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .file-preview, 
body.dark-mode .file-preview {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .message-image, 
body.dark-mode .message-image {
  border-color: var(--border-color);
}

/* 메시지 파일 첨부 스타일 */
.message-file {
  margin: 0;
  padding: 0;
}

/* DB 패널 스타일 */
.db-panel-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  overflow: hidden;
}

.db-panel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px;
  background-color: var(--bs-gray-100);
  border-radius: 4px;
}

.db-select-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.db-device-select {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--bs-gray-300);
  border-radius: 4px;
  background-color: var(--bs-white);
}

.db-refresh-btn {
  padding: 4px 8px;
  border: 1px solid var(--bs-gray-400);
  border-radius: 4px;
  background-color: var(--bs-white);
  font-size: 0.875rem;
  cursor: pointer;
}

.db-refresh-btn:hover {
  background-color: var(--bs-gray-200);
}

.db-data-container {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--bs-gray-300);
  border-radius: 4px;
  background-color: var(--bs-white);
}

.db-placeholder,
.db-loading,
.db-error {
  padding: 20px;
  text-align: center;
  color: var(--bs-gray-600);
}

.db-error {
  color: var(--bs-danger);
}

.json-editor-container {
  height: 100%;
  min-height: 200px;
}

.db-json-preview {
  padding: 10px;
  background-color: var(--bs-gray-100);
  border-radius: 4px;
  max-height: 300px;
  overflow: auto;
  font-family: monospace;
  font-size: 0.875rem;
  white-space: pre-wrap;
}

.db-button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding: 10px;
  border-top: 1px solid var(--bs-gray-200);
}

.db-save-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  background-color: var(--bs-primary);
  color: white;
  cursor: pointer;
}

.db-save-btn:hover {
  background-color: var(--bs-primary-darker);
}

.db-message {
  padding: 10px;
  margin-top: 10px;
  background-color: var(--bs-warning-soft);
  border-left: 4px solid var(--bs-warning);
  color: var(--bs-gray-700);
  font-size: 0.875rem;
}

/* 임베디드 DB 패널 스타일 */
.embedded-db-panel-preview {
  background-color: var(--bs-gray-100);
  border-radius: 6px;
  overflow: hidden;
}

.db-data-preview {
  padding: 10px;
  max-height: 200px;
  overflow: auto;
}

.db-json-preview-small {
  font-family: monospace;
  font-size: 0.75rem;
  white-space: pre-wrap;
  max-height: 150px;
  overflow: auto;
  background-color: var(--bs-gray-200);
  border-radius: 4px;
  padding: 8px;
  margin: 0;
}

.db-panel-info {
  background-color: var(--bs-light);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 다크 모드 DB 패널 스타일 */
body.dark-mode .db-panel-controls {
  background-color: var(--bs-gray-800);
}

body.dark-mode .db-device-select,
body.dark-mode .db-refresh-btn {
  background-color: var(--bs-gray-700);
  border-color: var(--bs-gray-600);
  color: var(--bs-light);
}

body.dark-mode .db-data-container {
  background-color: var(--bs-gray-800);
  border-color: var(--bs-gray-700);
}

body.dark-mode .db-placeholder,
body.dark-mode .db-loading {
  color: var(--bs-gray-400);
}

body.dark-mode .db-json-preview {
  background-color: var(--bs-gray-900);
  color: var(--bs-light);
}

body.dark-mode .db-panel-info {
  background-color: var(--bs-gray-800);
  color: var(--bs-light);
}

body.dark-mode .db-json-preview-small {
  background-color: var(--bs-gray-900);
  color: var(--bs-light);
}

/* 디바이스 선택창 스타일 */
.device-selector {
  font-size: 0.8rem;
  border-radius: 0.375rem;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: all 0.2s ease;
}

.device-selector:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.device-selector option {
  padding: 0.25rem 0.5rem;
}

/* 탭 콘텐츠 스타일 */
.tab-content {
  margin-top: 0.5rem;
}

.tab-pane {
  min-height: 50px;
  padding: 0;
  border: none;
  background: transparent;
}

/* 디바이스 콘텐츠 스타일 */
.device-content {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  background-color: var(--bs-light);
  transition: all 0.3s ease;
}

.device-config-container {
  background-color: var(--bs-body-bg);
  border-radius: 0.375rem;
}

.device-config-container h6 {
  color: var(--bs-primary);
  font-weight: 600;
}

.config-data pre {
  font-size: 0.85rem;
  line-height: 1.4;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  background-color: var(--bs-light);
  color: var(--bs-body-color);
  margin: 0;
}

.config-data code {
  color: inherit;
  background: transparent;
  padding: 0;
}

.copy-config-btn {
  transition: all 0.2s ease;
}

.copy-config-btn:hover {
  transform: scale(1.05);
}

/* 다크 모드 지원 */
[data-theme="dark"] .role-badge-clickable::after,
body.dark-mode .role-badge-clickable::after {
  background-color: rgba(33, 37, 41, 0.9);
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .role-badge,
body.dark-mode .role-badge {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .role-badge.bg-success, 
body.dark-mode .role-badge.bg-success {
  background-color: #198754 !important;
  color: #fff;
}

[data-theme="dark"] .role-badge.bg-primary, 
body.dark-mode .role-badge.bg-primary {
  background-color: #0d6efd !important;
  color: #fff;
}

[data-theme="dark"] .role-badge.bg-info, 
body.dark-mode .role-badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #000;
}

[data-theme="dark"] .role-badge.bg-danger, 
body.dark-mode .role-badge.bg-danger {
  background-color: #dc3545 !important;
  color: #fff;
}

[data-theme="dark"] .device-selector,
body.dark-mode .device-selector {
  background-color: var(--bs-dark);
  border-color: var(--bs-border-color-translucent);
  color: var(--bs-light);
}

[data-theme="dark"] .device-selector option,
body.dark-mode .device-selector option {
  background-color: var(--bs-dark);
  color: var(--bs-light);
}

[data-theme="dark"] .device-content,
body.dark-mode .device-content {
  background-color: var(--bs-dark);
  border-color: var(--bs-border-color-translucent);
}

[data-theme="dark"] .device-config-container,
body.dark-mode .device-config-container {
  background-color: var(--bs-dark);
}

[data-theme="dark"] .config-data pre,
body.dark-mode .config-data pre {
  background-color: var(--bs-dark);
  border-color: var(--bs-border-color-translucent);
  color: var(--bs-light);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .device-selector {
    min-width: 70px;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  
  .post-header .ms-auto {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
  }
  
  .device-config-container {
    padding: 0.75rem !important;
  }
  
  .config-data pre {
    font-size: 0.75rem;
    max-height: 200px;
  }
  
  .role-badge {
    font-size: 0.6rem;
    padding: 0.2em 0.4em;
  }
}

@media (max-width: 576px) {
  .device-selector {
    min-width: 60px;
    font-size: 0.7rem;
  }
  
  .post-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .post-header .ms-auto {
    align-self: flex-end;
    flex-direction: row;
    gap: 0.5rem;
  }
}

/* 디바이스 선택창과 탭 구조 스타일 */
.device-selector {
  min-width: 100px;
  max-width: 150px;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

.device-selector:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* 탭 컨텐츠 스타일 */
.tab-content {
  min-height: 200px;
}

.tab-pane {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 디바이스 설정 GUI 컨테이너 */
.device-config-gui-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  transition: all 0.3s ease;
}

/* 다크모드에서 GUI 컨테이너 */
[data-theme="dark"] .device-config-gui-container {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* 설정 카드 스타일 */
.config-gui-view .card {
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 0.75rem;
}

.config-gui-view .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.config-gui-view .card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.75rem 0.75rem 0 0 !important;
  font-weight: 500;
  transition: all 0.2s ease;
}

.config-gui-view .card-header:hover {
  background-color: rgba(0, 123, 255, 0.1) !important;
}

.config-gui-view .card-header[data-bs-toggle="collapse"] {
  cursor: pointer;
  user-select: none;
}

.config-gui-view .card-header .bi-chevron-down,
.config-gui-view .card-header .bi-chevron-up {
  transition: transform 0.3s ease;
}

/* 폼 컨트롤 스타일 개선 */
.config-input {
  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  padding: 0.625rem 0.875rem;
}

.config-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
  transform: translateY(-1px);
}

.config-input[type="number"] {
  text-align: right;
}

/* 체크박스 스위치 스타일 */
.form-check-input.config-input {
  width: 3rem;
  height: 1.5rem;
  border-radius: 1rem;
  background-color: #6c757d;
  border: none;
  cursor: pointer;
}

.form-check-input.config-input:checked {
  background-color: #28a745;
  border-color: #28a745;
}

.form-check-input.config-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.form-check-label {
  margin-left: 0.5rem;
  font-weight: 500;
  color: #495057;
  transition: color 0.2s ease;
}

/* 배열 아이템 스타일 */
.array-items {
  background-color: #f8f9fa;
  border-radius: 0.5rem;
  padding: 1rem;
}

.array-items .input-group {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
}

.array-items .input-group-text {
  background-color: #007bff;
  color: white;
  border: none;
  font-weight: 600;
  min-width: 3rem;
  text-align: center;
}

/* 값 타입별 아이콘 색상 */
.bi-type { color: #17a2b8; }
.bi-123 { color: #28a745; }
.bi-toggle-on { color: #ffc107; }
.bi-braces { color: #6f42c1; }
.bi-question-circle { color: #6c757d; }
.bi-folder2-open { color: #fd7e14; }
.bi-list-ul { color: #20c997; }

/* 접기/펼치기 애니메이션 */
.collapse {
  transition: height 0.35s ease;
}

.collapsing {
  transition: height 0.35s ease;
}

/* 버튼 그룹 스타일 */
.btn-group .btn {
  border-radius: 0.5rem;
  margin-left: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.btn-group .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-group .btn:first-child {
  margin-left: 0;
}

/* 헤더 스타일 */
.device-config-gui-container h5 {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0;
}

.device-config-gui-container small {
  font-weight: 400;
  opacity: 0.8;
}

/* JSON 뷰 스타일 */
.config-json-view pre {
  border: none;
  border-radius: 0.75rem;
  font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.config-json-view .card-header {
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: none;
  color: white;
  font-weight: 600;
}

/* 뱃지 스타일 개선 */
.badge {
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

/* 로딩 상태 스타일 */
.config-loading {
  text-align: center;
  padding: 2rem;
  color: #6c757d;
}

.config-loading .spinner-border {
  width: 3rem;
  height: 3rem;
  border-width: 0.3rem;
}

/* 다크모드 스타일 */
[data-theme="dark"] .config-gui-view .card {
  background-color: #2d3748;
  border-color: #4a5568;
  color: #e2e8f0;
}

[data-theme="dark"] .config-gui-view .card-header {
  background-color: #4a5568;
  border-color: #718096;
  color: #e2e8f0;
}

[data-theme="dark"] .config-input {
  background-color: #2d3748;
  border-color: #4a5568;
  color: #e2e8f0;
}

[data-theme="dark"] .config-input:focus {
  border-color: #63b3ed;
  box-shadow: 0 0 0 0.2rem rgba(99, 179, 237, 0.25);
}

[data-theme="dark"] .array-items {
  background-color: #2d3748;
}

[data-theme="dark"] .form-check-label {
  color: #e2e8f0;
}

[data-theme="dark"] .device-config-gui-container h5 {
  color: #e2e8f0;
}

[data-theme="dark"] .input-group-text {
  background-color: #4299e1;
  border-color: #4299e1;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .device-config-gui-container {
    padding: 1rem;
    border-radius: 0.75rem;
  }
  
  .device-config-gui-container .btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .device-config-gui-container .btn-group .btn {
    margin-left: 0;
    margin-top: 0.25rem;
    border-radius: 0.5rem;
  }
  
  .device-config-gui-container .btn-group .btn:first-child {
    margin-top: 0;
  }
  
  .config-gui-view .row .col-md-4,
  .config-gui-view .row .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .config-gui-view .card-body .row {
    margin-bottom: 0.5rem;
  }
}

/* 성공/오류 상태 피드백 */
.config-input.is-valid {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.15);
}

.config-input.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

/* 저장 버튼 특별 스타일 */
.btn-outline-success:hover {
  background-color: #28a745;
  border-color: #28a745;
  transform: translateY(-1px);
}

/* 복사 버튼 특별 스타일 */
.btn-outline-primary:hover {
  background-color: #007bff;
  border-color: #007bff;
  transform: translateY(-1px);
}

/* 토글 버튼 특별 스타일 */
.btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  transform: translateY(-1px);
}

/* 스크롤바 스타일 (웹킷 브라우저) */
.config-json-view pre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.config-json-view pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.config-json-view pre::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.config-json-view pre::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* 디바이스 설정 GUI 명령창 버튼 스타일 */
.device-config-gui-container .d-flex.gap-2 {
  align-items: center;
  flex-wrap: wrap;
}

.device-config-gui-container .btn-group[aria-label="명령창"] {
  border-radius: 0.375rem;
  overflow: hidden;
}

.device-config-gui-container .btn-group[aria-label="명령창"] .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.device-config-gui-container .btn-group[aria-label="명령창"] .btn:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.device-config-gui-container .btn-group[aria-label="명령창"] .btn:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.device-config-gui-container .btn-group[aria-label="명령창"] .btn i {
  margin-right: 0.25rem;
  font-size: 0.8rem;
}

/* 실행 모드별 색상 */
.device-config-gui-container .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.device-config-gui-container .btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
  background-color: transparent;
}

.device-config-gui-container .btn-outline-danger:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.device-config-gui-container .btn-success {
  background-color: #198754;
  border-color: #198754;
  color: white;
}

.device-config-gui-container .btn-outline-success {
  color: #198754;
  border-color: #198754;
  background-color: transparent;
}

.device-config-gui-container .btn-outline-success:hover {
  background-color: #198754;
  border-color: #198754;
  color: white;
}

.device-config-gui-container .btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

.device-config-gui-container .btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
  background-color: transparent;
}

.device-config-gui-container .btn-outline-warning:hover {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

/* JSON 팝업 버튼 스타일 */
.device-config-gui-container .btn-outline-info {
  color: #0dcaf0;
  border-color: #0dcaf0;
  background-color: transparent;
  transition: all 0.2s ease;
}

.device-config-gui-container .btn-outline-info:hover {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
  color: #000;
  transform: scale(1.05);
}

/* JSON 모달 스타일 */
.modal-dialog.modal-lg {
  max-width: 900px;
}

.modal-content pre {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.modal-content pre code {
  color: #e83e8c;
  background: transparent;
}

/* 다크 모드 지원 */
[data-theme="dark"] .device-config-gui-container .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

[data-theme="dark"] .device-config-gui-container .btn-outline-danger {
  color: #ff6b7a;
  border-color: #ff6b7a;
}

[data-theme="dark"] .device-config-gui-container .btn-outline-danger:hover {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

[data-theme="dark"] .device-config-gui-container .btn-success {
  background-color: #198754;
  border-color: #198754;
}

[data-theme="dark"] .device-config-gui-container .btn-outline-success {
  color: #75b798;
  border-color: #75b798;
}

[data-theme="dark"] .device-config-gui-container .btn-outline-success:hover {
  background-color: #198754;
  border-color: #198754;
  color: white;
}

[data-theme="dark"] .device-config-gui-container .btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

[data-theme="dark"] .device-config-gui-container .btn-outline-warning {
  color: #ffda6a;
  border-color: #ffda6a;
}

[data-theme="dark"] .device-config-gui-container .btn-outline-warning:hover {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

[data-theme="dark"] .device-config-gui-container .btn-outline-info {
  color: #6edff6;
  border-color: #6edff6;
}

[data-theme="dark"] .device-config-gui-container .btn-outline-info:hover {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
  color: #000;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .device-config-gui-container .d-flex.gap-2 {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem !important;
  }
  
  .device-config-gui-container .btn-group {
    width: 100%;
  }
  
  .device-config-gui-container .btn-group .btn {
    flex: 1;
    font-size: 0.7rem;
    padding: 0.375rem 0.25rem;
  }
  
  .device-config-gui-container .btn-group[aria-label="명령창"] .btn {
    min-width: 60px;
  }
}

[data-theme="dark"] .device-config-gui-container .btn-outline-info:hover {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
  color: #000;
}

/* JSON/GUI 토글 모달 스타일 */
.modal-dialog.modal-xl {
  max-width: 90%;
}

.modal-header .btn-group {
  margin-right: 1rem;
}

.modal-header .btn-group .btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
}

.modal-header .btn-group .btn.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white;
}

.modal-header .btn-group .btn:not(.active) {
  background-color: transparent;
  color: var(--bs-primary);
}

.view-content {
  transition: opacity 0.3s ease;
}

.config-gui-view {
  max-height: 400px;
  overflow-y: auto;
}

.config-gui-view .card {
  margin-bottom: 1rem;
}

.config-gui-view .card-header {
  background-color: var(--bs-light);
  border-bottom: 1px solid var(--bs-border-color);
}

[data-theme="dark"] .modal-header .btn-group .btn.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: white;
}

[data-theme="dark"] .modal-header .btn-group .btn:not(.active) {
  background-color: transparent;
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

[data-theme="dark"] .config-gui-view .card {
  background-color: var(--bs-dark);
  border-color: var(--bs-secondary);
}

[data-theme="dark"] .config-gui-view .card-header {
  background-color: var(--bs-secondary);
  border-bottom-color: var(--bs-border-color);
  color: white;
}

@media (max-width: 768px) {
  .modal-dialog.modal-xl {
    max-width: 95%;
    margin: 0.5rem;
  }
  
  .modal-header .btn-group .btn {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
  }
  
  .config-gui-view {
    max-height: 400px;
  }
}

/* GUI 저장 버튼 상태 스타일 */
#save-gui-config-jsonViewModal .btn {
  transition: all 0.3s ease;
}

.modal-body .btn-warning {
  animation: pulse-warning 2s infinite;
}

.modal-body .btn-success {
  animation: pulse-success 1s ease-in-out;
}

.modal-body .btn-danger {
  animation: shake 0.5s ease-in-out;
}

@keyframes pulse-warning {
  0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

@keyframes pulse-success {
  0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 토글 버튼 호버 효과 개선 */
.modal-header .btn-group .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.modal-header .btn-group .btn.active:hover {
  transform: none;
  box-shadow: none;
}

/* 명령창 드롭다운 스타일 */
.device-config-gui-container .dropdown-menu {
  min-width: 150px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.device-config-gui-container .dropdown-item {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  margin: 0.125rem 0.5rem;
  transition: all 0.2s ease;
}

.device-config-gui-container .dropdown-item:hover {
  background-color: var(--bs-light);
  transform: translateX(2px);
}

.device-config-gui-container .dropdown-item.active {
  background-color: var(--bs-primary);
  color: white;
  font-weight: 600;
}

.device-config-gui-container .dropdown-item.active:hover {
  background-color: var(--bs-primary);
  color: white;
}

.device-config-gui-container .dropdown-item i {
  width: 16px;
  text-align: center;
}

/* 다크모드 드롭다운 스타일 */
[data-theme="dark"] .device-config-gui-container .dropdown-menu {
  background-color: var(--bs-dark);
  border-color: var(--bs-secondary);
}

[data-theme="dark"] .device-config-gui-container .dropdown-item {
  color: var(--bs-light);
}

[data-theme="dark"] .device-config-gui-container .dropdown-item:hover {
  background-color: var(--bs-secondary);
  color: white;
}

[data-theme="dark"] .device-config-gui-container .dropdown-item.active {
  background-color: var(--bs-primary);
  color: white;
}

/* 명령 버튼 스타일 개선 */
.device-config-gui-container .btn-outline-warning.dropdown-toggle {
  border-color: #ffc107;
  color: #ffc107;
}

.device-config-gui-container .btn-outline-warning.dropdown-toggle:hover {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

.device-config-gui-container .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

/* 반응형 드롭다운 스타일 */
@media (max-width: 768px) {
  .device-config-gui-container .dropdown-menu {
    min-width: 120px;
    font-size: 0.8rem;
  }
  
  .device-config-gui-container .dropdown-item {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  
  .device-config-gui-container .dropdown-item i {
    width: 14px;
    font-size: 0.8rem;
  }
  
  .device-config-gui-container .btn-outline-warning.dropdown-toggle {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
}

/* 드롭다운 애니메이션 */
.device-config-gui-container .dropdown-menu {
  animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 활성 드롭다운 아이템 강조 */
.device-config-gui-container .dropdown-item.active::before {
  content: "●";
  color: var(--bs-primary);
  margin-right: 0.5rem;
  font-weight: bold;
}

[data-theme="dark"] .device-config-gui-container .dropdown-item.active::before {
  color: var(--bs-primary);
}

/* 모달 내 GUI 뷰 스타일 개선 */
.modal-body .config-gui-view {
  max-height: 600px;
  overflow-y: auto;
  padding: 0;
}

.modal-body .config-gui-view .card {
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.modal-body .config-gui-view .card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.modal-body .config-gui-view .card-body {
  padding: 1rem;
}

.modal-body .config-gui-view .form-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.modal-body .config-gui-view .form-label i {
  color: var(--bs-primary);
}

.modal-body .config-gui-view .form-control {
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
}

.modal-body .config-gui-view .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.modal-body .config-gui-view .form-check-input {
  width: 3rem;
  height: 1.5rem;
  border-radius: 1rem;
  transition: all 0.2s ease;
}

.modal-body .config-gui-view .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.modal-body .config-gui-view .form-check-label {
  font-weight: 500;
  margin-left: 0.5rem;
}

.modal-body .config-gui-view .text-muted {
  font-size: 0.8rem;
  font-style: italic;
}

/* 다크모드 모달 GUI 뷰 스타일 */
[data-theme="dark"] .modal-body .config-gui-view .card {
  background-color: var(--bs-dark);
  border-color: var(--bs-secondary);
  color: var(--bs-light);
}

[data-theme="dark"] .modal-body .config-gui-view .card:hover {
  box-shadow: 0 4px 8px rgba(255,255,255,0.1);
}

[data-theme="dark"] .modal-body .config-gui-view .form-control {
  background-color: var(--bs-dark);
  border-color: var(--bs-secondary);
  color: var(--bs-light);
}

[data-theme="dark"] .modal-body .config-gui-view .form-control:focus {
  background-color: var(--bs-dark);
  border-color: var(--bs-primary);
  color: var(--bs-light);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

[data-theme="dark"] .modal-body .config-gui-view .form-check-input {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

[data-theme="dark"] .modal-body .config-gui-view .form-check-input:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

[data-theme="dark"] .modal-body .config-gui-view .text-muted {
  color: var(--bs-secondary) !important;
}

/* 중첩 객체 카드 스타일 */
.modal-body .config-gui-view .card .card {
  margin-bottom: 0.5rem;
  border: 1px solid rgba(0,0,0,0.125);
}

.modal-body .config-gui-view .card-header {
  background-color: var(--bs-light);
  border-bottom: 1px solid rgba(0,0,0,0.125);
  font-weight: 600;
  padding: 0.75rem 1rem;
}

.modal-body .config-gui-view .card-header:hover {
  background-color: var(--bs-primary);
  color: white;
}

[data-theme="dark"] .modal-body .config-gui-view .card-header {
  background-color: var(--bs-secondary);
  border-bottom-color: var(--bs-border-color);
  color: var(--bs-light);
}

[data-theme="dark"] .modal-body .config-gui-view .card-header:hover {
  background-color: var(--bs-primary);
  color: white;
}

/* 배열 항목 스타일 */
.modal-body .config-gui-view .array-items .input-group {
  margin-bottom: 0.5rem;
}

.modal-body .config-gui-view .input-group-text {
  background-color: var(--bs-light);
  border-color: #dee2e6;
  font-weight: 600;
}

[data-theme="dark"] .modal-body .config-gui-view .input-group-text {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: var(--bs-light);
}

/* 모달 GUI 뷰 배지 스타일 */
.modal-body .config-gui-view .badge {
  font-size: 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.modal-body .config-gui-view .form-check-input:checked + .form-check-label .badge {
  animation: badgeSuccess 0.3s ease;
}

@keyframes badgeSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 토글 스위치 개선 */
.modal-body .config-gui-view .form-check-input {
  width: 3rem;
  height: 1.5rem;
  border-radius: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modal-body .config-gui-view .form-check-input:checked {
  background-color: #198754;
  border-color: #198754;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.modal-body .config-gui-view .form-check-input:not(:checked) {
  background-color: #6c757d;
  border-color: #6c757d;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.modal-body .config-gui-view .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* 입력 필드 포커스 효과 개선 */
.modal-body .config-gui-view .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
  transform: translateY(-1px);
}

/* 카드 레이아웃 개선 */
.modal-body .config-gui-view .row.align-items-center {
  min-height: 60px;
}

.modal-body .config-gui-view .col-md-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-body .config-gui-view .col-md-8 {
  display: flex;
  align-items: center;
}

/* 반응형 개선 */
@media (max-width: 768px) {
  .modal-body .config-gui-view .col-md-4,
  .modal-body .config-gui-view .col-md-8 {
    margin-bottom: 0.5rem;
  }
  
  .modal-body .config-gui-view .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
  }
  
  .modal-body .config-gui-view .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
}