/*
THEME NAME: AI Forum Theme
THEME URI: https://ai-open.kr/
DESCRIPTION: AI 포럼 전용 테마 - Hometory 기반
VERSION: 1.0.1
AUTHOR: AI Forum Team
AUTHOR URI: https://ai-open.kr/
TAGS: ai, forum, mangboard, theme, korean, board,
*/

/* =============================
   CSS 변수 정의
   ============================= */

:root {
  --primary-color: #3b82f6;
  --primary-dark: #0d4a8a;
  --text-color: #000;
  --text-light: #333;
  --text-muted: #666;
  --text-placeholder: #999;
  --white-color: #fff;
  --border-color: #e5e5e5;
  --border-light: #f0f0f0;
  --background-light: #f8f9fa;
  --background-muted: #edf2f7;
  --accent-color: #ffd700;
  --success-color: #28a745;
  --hamburger-color: #333;
  --logo-height: 40px;
  --menu-height: 70px;
  --nav-link-color: white;
}

/* =============================
   기본 스타일
   ============================= */

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

body {
  font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text-color) !important;
  background-color: var(--white-color);
  font-size: 14px;
}

/* =============================
   본문 Wrapper 스타일
   ============================= */

.ht-main-wrapper {
  position: relative;
  background: white;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  margin-top: 0 !important; /* 헤더 위 공백 제거 */
}

/* =============================
   사이트 헤더와 바디 사이 공간
   ============================= */

.site-header,
#masthead.site-header,
.site-body,
div.site-body {
  margin-bottom: 20px !important;
}

/* =============================
   게시판 헤더 스타일
   ============================= */

.ht-header-wrapper {
  padding: 7px 0;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.ht-main-nav-panel {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* 메뉴 컨테이너 */
/* .container,
.container-fluid {
  background-color: var(--primary-color);
} */

/* 메뉴 헤더 - 가운데 정렬 */
.menu-header {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #1264b1 !important;
}

/* 메뉴 영역에만 배경색 적용 */
.ht-menu-wrapper {
  display: table;
  width: 100%;
  height: 60px !important; /* 높이를 60px로 직접 지정 */
  padding: 0 !important; /* 모든 패딩 제거 */
  position: relative;
  margin: 0 auto;
  /* background-color: var(--primary-color); */
}

.ht-menu-wrapper .ht-menu-logo {
  display: table-cell;
  vertical-align: middle;
  padding-top: 4px;
}

.ht-menu-wrapper .ht-site-navigation {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  padding: 0px;
  position: relative;
}

.ht-menu-wrapper .ht-site-navigation .ht-menu-nav {
  float: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* =============================
   메뉴 스타일
   ============================= */

/* 메뉴 네비게이션 기본 스타일 */
.ht-menu-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 프라이머리 메뉴 */
.ht-menu-nav .primary-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.ht-menu-nav .primary-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 메뉴 링크 기본 스타일 */
.ht-menu-nav .primary-menu li a {
  color: white !important;
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  font-weight: 500;
  transition: color 0.3s ease;
  background-color: transparent;
}

/* 메뉴 호버 효과 - 흰색에서 파란색으로 변경 */
.ht-menu-nav .primary-menu li a:hover,
.ht-menu-nav .ht-menu-primary .primary-menu li a:hover {
  color: var(--primary-color) !important;
}

/* 현재 메뉴 아이템 - 메뉴는 기본 흰색 유지 */
.ht-menu-nav .primary-menu li.current-menu-item a,
.ht-menu-nav .ht-menu-primary .primary-menu li.current-menu-item a {
  color: white !important;
}

/* 게시판 링크 스타일 */
.ht-menu-nav .primary-menu .sub-menu li a {
  color: #333 !important;
  background-color: white;
}

/* 게시판 링크 호버 효과 - 검은색에서 파란색으로 변경 */
.ht-menu-nav .primary-menu .sub-menu li a:hover {
  color: var(--primary-color) !important;
}

/* nav-link 스타일 통합 */
.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.nav-link:visited {
  color: var(--nav-link-color) !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

/* 헤더 메뉴 모든 링크 흰색 유지 */
.ht-header-wrapper a,
.ht-header-wrapper a:hover,
.ht-header-wrapper a:focus,
.ht-header-wrapper a:active,
.ht-header-wrapper .nav-link,
.ht-header-wrapper .nav-link:hover,
.ht-header-wrapper .nav-link:focus,
.ht-header-wrapper .nav-link:active {
  color: var(--nav-link-color) !important;
}

/* 모바일 메뉴에서 nav-link 텍스트 색상 강제 적용 */
@media (max-width: 768px) {
  .mobile-menu-panel .nav-link,
  .mobile-menu-panel .nav-link:hover,
  .mobile-menu-panel .nav-link:focus,
  .mobile-menu-panel .nav-link:active {
    color: var(--text-color) !important;
  }
  
  /* 모바일 헤더 메뉴 hover 시 흰색 유지 */
  .nav-link,
  .nav-link:hover,
  .nav-link:focus,
  .nav-link:active {
    color: white !important;
  }
}

/* 드롭다운 메뉴 컨테이너 */
.ht-menu-nav ul ul {
  background: var(--white-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: 15px !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}

/* 드롭다운 메뉴 아이템 */
.ht-menu-nav ul ul li,
.ht-menu-nav ul ul li:last-child,
.ht-menu-nav ul ul li:first-child,
.ht-menu-nav ul ul li:nth-child(n) {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 드롭다운 메뉴 링크 - 흰색 덮어쓰기 */
.ht-menu-nav ul ul li a.nav-link,
.ht-menu-nav ul ul li a.nav-link:hover,
.ht-menu-nav ul ul li a.nav-link:focus,
.ht-menu-nav ul ul li a.nav-link:active,
.ht-menu-nav ul ul li a,
.ht-menu-nav ul ul li a:hover,
.ht-menu-nav ul ul li a:focus,
.ht-menu-nav ul ul li a:active {
  color: var(--text-light) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  padding: 10px 0 !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  transition: color 0.2s ease !important;
  border: none !important;
  margin: 0 !important;
}

/* 드롭다운 메뉴 호버 효과 */
.ht-menu-nav ul ul li a:hover {
  color: var(--primary-color) !important;
}

/* 드롭다운 현재 메뉴 아이템 */
.ht-menu-nav ul ul li.current-menu-item a {
  color: var(--primary-color) !important;
}

/* 서브메뉴 아이콘 숨기기 */
.ht-menu-nav ul ul li:before,
.ht-menu-nav ul ul li:hover:before {
  display: none !important;
}

/* =============================
   로고 스타일
   ============================= */

/* 로고 컨테이너 */
.logo-container {
  display: flex;
  align-items: center;
  height: var(--logo-height);
  gap: 5px;
}

/* 로고 링크 */
.custom-logo-link {
  display: flex;
  align-items: center;
  height: var(--logo-height) !important;
  text-decoration: none;
}

/* 로고 이미지 - 기본 스타일 */
.custom-logo {
  height: 60px !important;
  display: flex;
  align-items: center;
}

.custom-logo img,
img.custom-logo {
  height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
  max-height: 60px !important;
}

/* 메뉴 래퍼 내 로고 이미지 */
.ht-menu-wrapper .ht-menu-logo img,
.ht-menu-wrapper .ht-menu-logo .custom-logo img,
.ht-menu-wrapper .ht-menu-logo img.custom-logo {
  height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
  max-height: 60px !important;
}

/* 특정 이미지 파일에 대한 스타일 */
img[src*="cropped-그림1-2.png"] {
  height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
  max-height: 60px !important;
}

/* 가장 강력한 선택자 - body 내 모든 로고 이미지 */
body img.custom-logo,
body .custom-logo img,
body .ht-menu-wrapper img,
body .ht-menu-logo img {
  height: 60px !important;
  width: auto !important;
  object-fit: contain !important;
  max-height: 60px !important;
}

/* 로고 텍스트 */
.custom-logo-text {
  color: var(--text-color) !important;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  height: 60px;
  justify-content: center;
  margin-left: 5px;
}

.custom-logo-text a {
  color: var(--text-color) !important;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

/* 로고 텍스트 라인 */
.logo-line1,
.logo-line2 {
  color: var(--text-color) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  display: block;
  white-space: nowrap;
}

/* 로고 텍스트 하이라이트 */
.custom-logo-text .highlight {
  color: var(--accent-color);
  font-weight: 700;
}

.top-header .container .logo-line1 .highlight,
.top-header .container .logo-line2 .highlight {
  font-weight: 700;
  color: var(--primary-color);
}

/* 모바일 반응형 로고 스타일 */
@media (max-width: 768px) {
  /* 헤더 컨테이너 레이아웃 */
  .top-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
  }
  
  /* 메뉴 토글 버튼 - 왼쪽 끝 */
  .mobile-menu-toggle {
    position: absolute !important;
    left: 0 !important;
    z-index: 1001 !important;
    order: 1 !important;
  }
  
  /* 로고 컨테이너 - 중앙 배치 */
  .logo-container {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* 모바일에서 로고 높이 40px로 설정 (60px -> 40px) */
  .custom-logo,
  .custom-logo img,
  img.custom-logo,
  body img.custom-logo,
  body .custom-logo img,
  .ht-menu-wrapper .ht-menu-logo img,
  .ht-menu-wrapper .ht-menu-logo .custom-logo img,
  img[src*="cropped-그림1-2.png"] {
    height: var(--logo-height) !important;
    max-height: var(--logo-height) !important;
  }
  
  /* 로고 텍스트도 높이 조정 */
  .custom-logo-text {
    height: var(--logo-height) !important;
    font-size: 14px !important;
  }
  
  .logo-line1,
  .logo-line2 {
    font-size: 12px !important;
  }
  
  /* 모바일 사용자 메뉴 - 오른쪽 끝 */
  .mobile-user-menu {
    position: absolute !important;
    right: 0 !important;
    z-index: 1001 !important;
    order: 3 !important;
  }
  
  /* 모바일 사용자 정보 스타일 */
  .mobile-user-info {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    white-space: nowrap !important;
    width: 100% !important;
  }
  
  /* 모바일 사용자 정보 왼쪽 그룹 (레벨, 닉네임, 포인트) */
  .mobile-user-info > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 1 !important;
  }
  
  /* 모바일 사용자 정보 오른쪽 그룹 (설정, 로그아웃) */
  .mobile-user-info > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-user-name,
  .mobile-logout-btn {
    font-size: 12px !important;
  }
  
  /* 모바일 로그인/회원가입 버튼 스타일 */
  .mobile-auth-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    white-space: nowrap !important;
    margin-left: auto !important;
  }
  
  .mobile-login-btn,
  .mobile-register-btn {
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    border: 1px solid var(--primary-color) !important;
    background-color: transparent !important;
    color: var(--primary-color) !important;
    transition: all 0.2s ease !important;
  }
  
  .mobile-login-btn:hover,
  .mobile-register-btn:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
  }
}

/* top-header 가운데 정렬 */
.top-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  background: var(--white-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.top-header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.top-header .container .top-header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 60px !important;
}

/* 사용자 메뉴 */
.top-header .container .user-menu {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: 200px !important;
  max-width: 300px !important;
}

/* 데스크톱 사용자 정보를 한 줄로 표시 */
.desktop-only .user-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.desktop-only .user-info .user-info-line1,
.desktop-only .user-info .user-info-line2 {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  gap: 6px !important;
}

/* 데스크톱 사용자 정보 폰트 크기 조정 */
.desktop-only .user-info .user-name,
.desktop-only .user-info .user-name a {
  font-size: 13px !important;
}

.desktop-only .user-info .ai-forum-points {
  font-size: 13px !important;
}

.desktop-only .user-info .logout-btn {
  font-size: 13px !important;
}

/* 설정 버튼 스타일 */
.settings-btn,
.mobile-settings-btn {
  display: inline-block !important;
  color: #666 !important;
  text-decoration: none !important;
  font-size: 11px !important;
  padding: 2px 4px !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}

.settings-btn:hover,
.mobile-settings-btn:hover {
  background-color: #f0f0f0 !important;
  color: #333 !important;
  text-decoration: none !important;
}

/* 로그아웃 버튼 새 스타일 (양쪽 끝 배치용) */
.logout-btn {
  display: inline-block !important;
  color: #666 !important;
  text-decoration: none !important;
  font-size: 11px !important;
  padding: 2px 4px !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}

.logout-btn:hover {
  background-color: #f0f0f0 !important;
  color: #333 !important;
  text-decoration: none !important;
}

/* 모바일 버튼 스타일 */
.mobile-logout-btn {
  display: inline-block !important;
  color: #666 !important;
  text-decoration: none !important;
  font-size: 10px !important;
  padding: 2px 4px !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}

.mobile-logout-btn:hover {
  background-color: #f0f0f0 !important;
  color: #333 !important;
  text-decoration: none !important;
}

/* 기존 로그아웃 버튼 스타일 제거 */
.top-header .container .logout-btn,
.ht-header-wrapper .logout-btn,
.user-menu .logout-btn {
  margin-left: 0 !important;
  order: unset !important;
  position: static !important;
  right: auto !important;
}

.saramin-top-header .container .user-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px; /* 20px에서 10px로 변경 */
}

.saramin-top-header .container .user-name {
  font-size: 12px;
  color: var(--text-muted);
}

.saramin-top-header .container .auth-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px; /* 20px에서 10px로 변경 */
}

.saramin-top-header .container .login-btn {
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  border: 1px solid var(--primary-color) !important;
  background-color: transparent !important;
  color: var(--primary-color) !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  min-width: 50px !important;
  text-align: center !important;
}

.saramin-top-header .container .login-btn:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.saramin-top-header .container .register-btn {
  font-size: 12px !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  border: 1px solid var(--primary-color) !important;
  background-color: transparent !important;
  color: var(--primary-color) !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  min-width: 60px !important;
  text-align: center !important;
}

.saramin-top-header .container .register-btn:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* 버튼 사이 간격을 위한 빈 요소 */
.button-spacer {
  width: 10px; /* 10px 간격 */
  display: inline-block;
}

.saramin-top-header .container .logout-btn {
  padding: 6px 12px; /* 원래 패딩으로 복원 */
  border-radius: 0;
  text-decoration: none;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-color);
  transition: 0.2s ease;
}

.saramin-top-header .container .logout-btn:hover {
  background: var(--background-light);
  color: var(--text-light);
}

/* =============================
   검색바 스타일
   ============================= */

/* 검색 컨테이너 */
.top-header .container .search-container {
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 20px !important;
  width: auto !important;
  max-width: 600px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* 로고와 검색바를 왼쪽으로 정렬 */
.top-header .container .site-branding,
.top-header .container .search-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-right: auto !important;
}

/* 검색바 길이 제한 */
.search-container {
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 20px !important;
  max-width: 600px !important; /* 최대 길이 제한 */
}

.search-bar {
  position: relative !important;
  background: var(--background-light) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  cursor: text !important;
  max-width: 600px !important; /* 최대 길이 제한 */
}

/* 검색 아이콘 */
.top-header .container .search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-placeholder);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
  width: 16px;
  text-align: left;
}

/* 검색 폼 */
.top-header .container .search-form {
  margin: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 검색 입력 필드 */
.top-header .container .search-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 12px 8px 32px;
  font-size: 13px;
  color: var(--text-light);
  outline: none;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  line-height: 1.4;
  height: 100%;
  box-sizing: border-box;
  text-align: left;
}

.top-header .container .search-input::placeholder {
  color: var(--text-placeholder);
}

/* =============================
   메인 콘텐츠 레이아웃
   ============================= */

/* MangBoard Wrapper 크기 조절 */
.wrapper {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Boxed 레이아웃일 때 wrapper 크기 조절 */
.ht-boxed-layout .wrapper {
    max-width: var(--layout-max-width, 1200px) !important;
}

/* Wide 레이아웃일 때 wrapper 크기 */
.ht-wide-layout .wrapper {
    max-width: 100% !important;
}

.contents { 
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.container { 
  display: flex;
  gap: 0; /* 20px에서 0으로 변경 */
  width: 100%;
  padding: 20px 0; /* body container에 상하 padding 추가 */
}

.center { 
  flex: 1;
  min-width: 0;
}

.right { 
  width: 300px;
  flex-shrink: 0;
}

/* =============================
   패널 스타일
   ============================= */

/* 메인 레이아웃 - 왼쪽 패널들과 오른쪽 사용자 패널 */
.container {
  display: flex;
  gap: 5px; /* left panel과 right panel 사이 공간 줄임 */
  margin-bottom: 30px;
  width: 100%;
  padding: 20px !important; /* 상하좌우 모두 20px 패딩 */
}

/* 왼쪽 패널들 */
.left-panels {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 오른쪽 사용자 패널 */
.right-panels {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 1열: AI뉴스 패널 */
.news-panel {
  width: 100%;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
  min-height: 180px;
}

/* 사용자 패널 */
.personal-panel {
  width: 100%;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  padding: 5px;
  margin-bottom: 0;
  min-height: 150px;
}

/* 인기 게시판 패널 */
.popular-boards-panel {
  width: 100%;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
  min-height: 180px;
}

/* 사용자 하위 패널 - 다른 패널과 동일한 디자인 */
.user-subpanel {
  width: 100%;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
  margin-top: 0 !important;
}

.user-subpanel .tab-content {
  padding: 15px;
}

/* 2번째 열 패널들 */
.second-col-panels {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  visibility: visible;
  opacity: 1;
  position: relative;
  z-index: 1;
  width: 100%;
}

.latest-panel,
.popular-panel,
.hot-panel,
.latest-popular-panel {
  width: 100%;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
  min-height: 180px;
}

.panel-header {
  background: var(--background-light);
  height: var(--logo-height);
  padding: 0 15px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color) !important;
}

.more-link {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 0;
  transition: all 0.2s ease;
}

.more-link:hover {
  color: var(--primary-color);
  background-color: var(--background-light);
  text-decoration: none;
}

.more-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.more-links .more-link {
  font-size: 11px;
  padding: 2px 6px;
}

/* 탭 스타일 */
.tab-buttons {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

/* 뉴스 탭: 버튼이 2줄로 줄바꿈되지 않도록 공간 확보 및 노랩 처리 */
.news-panel .tab-buttons {
  flex: 0 0 auto; /* 동일 비율 분배 방지 */
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto; /* 길이 초과 시 스크롤 */
  overflow-y: hidden;
  justify-content: flex-start;
}

.news-panel .tab-button {
  white-space: nowrap !important;
  min-width: 70px !important; /* 고정 목표와 일치 */
}

/* AI뉴스 패널 항목 너비 축소 */
.news-panel .post-list {
  padding: 0; /* 내부 패딩 제거 */
}
.news-panel .post-item {
  width: 100%;
  margin: 0; /* 여백 제거로 다른 패널과 정렬 일치 */
}

/* 게시판 목록(테마 레벨) 작성자 셀: 2줄 방지 및 말줄임, 아이콘 수축 방지 */
.mb-board .mb-user-name,
.mb-board .mb-user-name a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
  vertical-align: middle !important;
  max-width: 100% !important;
}
.mb-board .mb-user-name a {
  max-width: calc(100% - 22px) !important; /* 아이콘 영역 확보 */
}
.mb-board .mb-user-name img,
.mb-board .mb-user-name svg,
.mb-board .mb-user-name .icon {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  flex: 0 0 auto !important;
  max-width: 16px !important;
  max-height: 16px !important;
}
/* 작성자 셀 폭 강제 (mb-user-name 클래스가 th/td에 지정됨) */
.mb-board .table thead tr th.mb-user-name,
.mb-board .table tbody tr td.mb-user-name {
  width: 140px !important;
  min-width: 140px !important;
}

/* 스킨 클래스가 없을 경우(호환용): 4번째 열(작성자) 강제 적용 */
.mb-board .table:not(.table-page) thead tr th:nth-child(4),
.mb-board .table:not(.table-page) tbody tr td:nth-child(4) {
  width: 140px !important;
  min-width: 140px !important;
  white-space: nowrap !important;
}
.mb-board .table:not(.table-page) tbody tr td:nth-child(4) a {
  display: inline-block !important;
  max-width: calc(100% - 22px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.mb-board .table tbody tr td:nth-child(4) img,
.mb-board .table tbody tr td:nth-child(4) svg {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}

/* AI뉴스 목록에서 카테고리(항목) - panel-category 사용 */
.news-panel .post-item .panel-category {
  flex: 0 0 70px;
  max-width: 70px;
}

/* 랭킹 닉네임 + 아이콘이 2줄로 내려가지 않도록 강제 한 줄 처리 */
.ranking-item {
  white-space: nowrap;
}
.ranking-item .user-name a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 트로피 아이콘 (랭킹 표식) */
.rank-trophy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  margin-right: 6px !important;
}

/* 통합 랭크 아이콘 (왕관/메달/트로피/별/반짝/기본) */
.rank-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  margin-right: 6px !important;
}

/* 게시판 목록(Man gBoard) 작성자 컬럼 폭 약간 확대 */
.mb_board_list .mb-col-writer,
.mb_list .mb-col-writer,
.mb-list .col-writer,
.mb_table_list .writer,
.mb_list_table .writer,
table.mb_table_list td.writer,
table.mb_list_table td.writer {
  width: 120px !important;
  min-width: 120px !important;
}

/* 게시판 목록 - 작성자(닉네임+아이콘) 줄바꿈 방지 및 말줄임 처리 */
.mb_board_list .mb-col-writer,
.mb_list .mb-col-writer,
.mb-list .col-writer,
.mb_table_list .writer,
.mb_list_table .writer,
table.mb_table_list td.writer,
table.mb_list_table td.writer {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 닉네임 텍스트는 공간 내 말줄임 처리 */
.mb_board_list .mb-col-writer a,
.mb_list .mb-col-writer a,
.mb-list .col-writer a,
.mb_table_list .writer a,
.mb_list_table .writer a,
table.mb_table_list td.writer a,
table.mb_list_table td.writer a {
  display: inline-block !important;
  max-width: calc(100% - 20px) !important; /* 아이콘 자리 확보 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* 아이콘은 줄바꿈/수축 방지 및 수직정렬 */
.mb_board_list .mb-col-writer img,
.mb_list .mb-col-writer img,
.mb-list .col-writer img,
.mb_table_list .writer img,
.mb_list_table .writer img,
table.mb_table_list td.writer img,
table.mb_list_table td.writer img,
.mb_board_list .mb-col-writer svg,
.mb_list .mb-col-writer svg,
.mb-list .col-writer svg,
.mb_table_list .writer svg,
.mb_list_table .writer svg,
table.mb_table_list td.writer svg,
table.mb_list_table td.writer svg,
.mb_board_list .mb-col-writer .icon,
.mb_list .mb-col-writer .icon,
.mb-list .col-writer .icon,
.mb_table_list .writer .icon,
.mb_list_table .writer .icon,
table.mb_table_list td.writer .icon,
table.mb_list_table td.writer .icon {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  flex: 0 0 auto !important;
  max-width: 16px; /* 안전한 기본값 */
  max-height: 16px;
}

/* AI뉴스/코멘트 패널 제목 영역 높이 40px로 고정 */
.news-panel .panel-header,
.user-subpanel .panel-header {
  height: var(--logo-height) !important;
}

/* 해당 패널의 탭 버튼 높이/정렬 보정 */
.news-panel .panel-header .tab-button,
.user-subpanel .panel-header .tab-button {
  height: var(--logo-height) !important;
  line-height: var(--logo-height) !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 뉴스 패널 탭 버튼 폭 고정 70px */
.news-panel .panel-header .tab-button {
  width: 70px !important;
  flex: 0 0 70px !important;
  padding: 0 6px !important;
  justify-content: center !important;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* 모바일: 비율(1/6)로 탭을 한 줄에 모두 표시 */
@media (max-width: 768px) {
  .news-panel .panel-header { gap: 4px; }
  .news-panel .tab-buttons { flex: 1 1 auto; gap: 2px; overflow-x: hidden; justify-content: space-between; }
  .news-panel .panel-header .tab-button {
    width: calc(100% / 6) !important;
    max-width: calc(100% / 6) !important;
    min-width: 0 !important;
    flex: 1 1 calc(100% / 6) !important;
    padding: 0 4px !important;
    font-size: 14px !important;
  }
  
  /* 모바일 뉴스 패널 전체 폰트 크기 14px로 통일 */
  .news-panel .post-item .title,
  .news-panel .post-item .panel-category,
  .news-panel .post-item .meta,
  .news-panel .post-item .author,
  .news-panel .post-item .date {
    font-size: 14px !important;
  }
}

.tab-button {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 14px; /* 패널 제목과 동일 */
  font-weight: 600 !important; /* 패널 제목과 동일 */
  color: var(--text-color) !important; /* 패널 제목과 동일 */
  font-family: inherit !important;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.tab-button:hover {
  color: var(--primary-color);
  border-bottom: 1px solid transparent;
}

.tab-button.active {
  color: var(--primary-color) !important; /* 탭 이름에 헤더 메뉴바 색깔 */
  border-bottom: 2px solid var(--primary-color) !important;
  margin-bottom: -1px;
}

/* 패널 헤더 내 탭 버튼 - 우선순위 강화 */
.panel-header .tab-button {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-color) !important;
  border-bottom: 1px solid transparent !important;
  box-sizing: border-box !important;
  position: relative;
}

/* 패널 헤더 내 호버 탭 버튼 색상 */
.panel-header .tab-button:hover {
  color: var(--primary-color) !important;
  border-bottom: 1px solid transparent !important;
}

/* 패널 헤더 내 활성 탭 버튼 색상 */
.panel-header .tab-button.active {
  color: var(--primary-color) !important; /* 탭 이름에 헤더 메뉴바 색깔 */
  border-bottom: 2px solid var(--primary-color) !important;
  margin-bottom: -1px !important;
}

/* 최신글/인기글 패널 탭 버튼 스타일 - AI뉴스 패널과 완전히 동일하게 */
.latest-popular-panel .panel-header .tab-buttons {
  border-bottom: 1px solid var(--border-color) !important;
  position: relative;
}

/* 최신글 패널 모든 탭 버튼 기본 스타일 - 패널헤더 안쪽에 위치하도록 */
.latest-popular-panel .panel-header .tab-button {
  border-bottom: 1px solid transparent !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  height: 40px !important;
  line-height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
}

/* 최신글 패널 활성 탭 - 파란바를 경계 안쪽에 위치 */
.latest-popular-panel .panel-header .tab-button.active {
  color: var(--primary-color) !important;
  border-bottom: 2px solid var(--primary-color) !important;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 1;
  height: 40px !important;
  line-height: 40px !important;
}

/* 최신글 패널 호버 상태 */
.latest-popular-panel .panel-header .tab-button:hover {
  color: var(--primary-color) !important;
  border-bottom: none !important;
}

/* 최신글 패널 비활성 탭 - 모든 테두리 완전 제거 */
.latest-popular-panel .panel-header .tab-button:not(.active) {
  border-bottom: none !important;
  border-top: none !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* 페이지네이션 스타일 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.page-number {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border-color);
  border-radius: 0;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--white-color);
}

.page-number:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.page-number.active {
  color: var(--white-color);
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.panel-header h3 a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.panel-header h3 a:hover {
  color: var(--primary-color) !important;
}

/* 게시판 제목 h1 스타일 */
h1.page-title {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--text-color) !important;
  margin: 0 0 20px 0;
}

h1.page-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
  cursor: pointer;
}

h1.page-title a:hover {
  color: var(--primary-color) !important;
  text-decoration: underline;
}

.post-list {
  padding: 0;
  list-style: none;
}

.post-item {
  height: 28px;
  padding: 0 15px;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.2s ease;
  line-height: 1;
}

.post-item * {
  vertical-align: middle;
}

.post-item:last-child {
  border-bottom: none;
}

.post-item:hover {
  background: var(--background-light);
}

/* =============================
   통합 패널 카테고리 스타일 (모든 패널에서 공통 사용)
   ============================= */
.panel-category {
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  padding: 0px 8px 0px 0px !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  color: var(--text-color) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 60px !important;
  max-width: 60px !important;
  min-width: 60px !important;
}

/* 기존 category 클래스는 panel-category로 통합되어 제거됨 */

.title {
  flex: 1;
  font-size: 14px;
  color: var(--text-color) !important;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

/* 더 강력한 선택자 */
.post-item .title,
.second-col-panels .title,
.first-col-panels .title {
  color: var(--text-color) !important;
}

.panel-header h3,
.second-col-panels .panel-header h3,
.first-col-panels .panel-header h3 {
  color: var(--text-color) !important;
}

.comment-count, .time-ago {
  background: var(--background-muted);
  color: var(--text-muted);
  padding: 1px 4px;
  font-size: 10px;
  line-height: 1;
  border-radius: 0;
  font-size: 10px;
  font-weight: 500;
  min-width: 20px;
  text-align: center;
}

/* =============================
   반응형 디자인
   ============================= */

@media (max-width: 768px) {
  .ht-header-wrapper {
    padding: 2px 0;
  }
  
  .ht-main-nav-panel .ht-menu-wrapper .ht-menu-logo {
    height: 62px;
  }
  
  .ht-menu-wrapper .ht-site-navigation {
    display: none;
  }
  
  .ht-header-wrapper .container-fluid {
    padding: 0 15px;
  }
  
  .top-header-content {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .search-container {
    order: 2;
    max-width: none;
    margin: 0;
    min-width: 100%;
    width: 100%;
  }
  
  .search-bar {
    width: 100%;
  }
  
  .site-branding {
    order: 1;
    justify-content: center;
  }
  
  .user-menu {
    order: 3;
    justify-content: center;
  }
  
  .contents { 
    flex-direction: column;
  }
  
  .wrapper {
    padding: 15px;
  }
}

/* =============================
   인쇄 스타일
   ============================= */

@media print {
  .site-header {
    display: none;
  }
  
  .mobile-menu-toggle,
  .nav-menu {
    display: none;
  }
}

/* =============================
   모바일 반응형 스타일
   ============================= */

/* 데스크톱에서만 표시 */
.desktop-only {
  display: block !important;
}

/* 모바일에서만 표시 */
.mobile-only {
  display: none !important;
}

.mobile-admin-buttons,
.mobile-menu-toggle,
.mobile-menu-panel {
  display: none;
}

/* 모바일 메뉴 토글 버튼 */
.mobile-menu-toggle {
  display: none;
  margin-left: auto;
}

.menu-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}

.hamburger-line {
  width: 16px;
  height: 2px;
  background-color: var(--hamburger-color);
  margin: 2px 0;
  transition: all 0.3s ease;
}

.menu-toggle-btn.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.menu-toggle-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.menu-toggle-btn.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* 모바일 메뉴 패널 */
.mobile-menu-panel {
  position: fixed;
  top: 60px;
  left: -100%;
  width: 200px;
  height: calc(100vh - 60px);
  background-color: var(--white-color);
  border-right: 1px solid var(--border-color);
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  z-index: 1000;
  transition: left 0.3s ease;
  overflow-y: auto;
}

.mobile-menu-panel.active {
  left: 0;
}

.mobile-menu-container {
  padding: 4px 12px;
  color: var(--text-color) !important;
}

.mobile-primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-primary-menu li {
  margin: 0;
  padding: 0;
}

.mobile-primary-menu li a {
  display: block;
  padding: 6px 0;
  color: var(--text-color) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.mobile-primary-menu li a:hover {
  background-color: var(--background-light);
  color: var(--text-color) !important;
}

/* 그룹 타이틀 강조 */
.mobile-primary-menu .menu-item-has-children > a {
  font-weight: bold;
  background-color: var(--background-light);
  border-bottom: 2px solid var(--border-color);
  padding-left: 0;
  color: var(--text-color) !important;
}

/* 서브메뉴 스타일링 - 항상 표시 */
.mobile-primary-menu .sub-menu {
  padding-left: 0;
  margin: 0;
  list-style: none;
  display: block; /* 항상 표시 */
}

.mobile-primary-menu .sub-menu li a {
  padding: 4px 0 4px 16px;
  font-weight: normal;
  font-size: 13px;
  color: var(--text-color) !important;
}

/* 게시판 앞에 하이픈 추가 */
.mobile-primary-menu .sub-menu li a::before {
  content: "- ";
  color: #666 !important;
}

/* 모바일에서 body 스크롤 방지 */
body.mobile-menu-open {
  overflow: hidden;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  /* 헤더 자연스러운 레이아웃 */
  .site-header,
  #masthead.site-header,
  header.site-header {
    position: relative !important;
    z-index: 100 !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
  }
  
  /* 메인 컨텐츠 영역 기본 여백만 */
  .site-main,
  .main-content,
  .content-area {
    margin-top: 10px !important;
    clear: both !important;
  }
  /* 데스크톱 요소 숨김 */
  /* 데스크톱 요소 완전 숨김 */
  .desktop-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  /* 모바일 요소 표시 */
  .mobile-only {
    display: block !important;
  }
  
  /* 데스크톱 요소 완전 숨김 */
  .desktop-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  .mobile-admin-buttons,
  .mobile-menu-toggle {
    display: block;
  }
  
  /* 로고 영역 조정 */
  .site-branding {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 10px;
  }
  
  /* 모바일 사용자 메뉴 */
  .mobile-user-menu {
    flex-shrink: 0;
    min-width: 120px;
    max-width: 200px;
    margin-left: 10px;
    z-index: 1;
  }
  
  .mobile-user-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
  }
  
  .mobile-auth-buttons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }
  
  /* 모바일 사용자 정보 요소들 강제 한 줄 배치 */
  .mobile-user-name,
  .ai-forum-level-badge,
  .ai-forum-points,
  .mobile-logout-btn {
    display: inline-block !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }
  
  /* 햄버거 메뉴 - 제일 왼쪽 */
  .mobile-menu-toggle {
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    display: block !important;
    order: 1 !important;
  }
  
  .mobile-user-name {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
  
  .mobile-logout-btn,
  .mobile-login-btn,
  .mobile-register-btn {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 0;
    text-decoration: none;
    text-align: center;
  }
  
  .mobile-logout-btn {
    background-color: var(--primary-color);
    color: white;
  }
  
  /* 중복 제거됨 - 위쪽에 통합된 스타일 사용 */
  
  /* 모바일에서 검색바 완전 제거 */
  .search-container {
    display: none !important;
  }
  
  /* 사용자 메뉴 숨김 */
  .user-menu {
    display: none !important;
  }
  
  /* 모바일 사용자 메뉴 표시 */
  .mobile-user-menu {
    display: block !important;
  }
  
  /* 메뉴 헤더 조정 - 모바일에서도 메뉴바 표시 */
  .menu-header {
    display: block;
    background-color: var(--primary-color);
    padding: 8px 0;
  }
  
  /* 모바일 4개 버튼 메뉴 - 기존 스타일 유지 */
  .mobile-board-navigation {
    display: block !important;
    width: 100%;
  }
  
  .mobile-four-button-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
    width: 100%;
    padding: 0;
  }
  
  .mobile-menu-button-wrapper {
    position: relative;
    flex: 1;
    min-width: calc(50% - 3px);
    max-width: calc(50% - 3px);
  }
  
  .mobile-menu-button {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    transition: all 0.2s ease;
    text-align: center;
  }
  
  .mobile-menu-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white !important;
  }
  
  .mobile-menu-button.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
  }
  
  .button-text {
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .mobile-button-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10010;
    margin-top: 4px;
    min-width: 200px;
    max-width: 280px;
  }
  
  .mobile-button-dropdown.show {
    display: block;
  }
  
  .mobile-submenu-list {
    margin: 0;
    padding: 8px 0;
    list-style: none;
  }
  
  .mobile-submenu-list li {
    margin: 0;
    border-bottom: 1px solid var(--border-light);
  }
  
  .mobile-submenu-list li:last-child {
    border-bottom: none;
  }
  
  .mobile-submenu-list li a {
    display: block;
    padding: 10px 16px;
    color: var(--text-light) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.2s ease;
  }
  
  .mobile-submenu-list li a:hover {
    background-color: var(--background-light);
    color: var(--text-light) !important;
  }
  
  .mobile-board-menu .sub-menu li a {
    padding-left: 28px;
    font-size: 12px;
    color: var(--text-muted) !important;
  }
  
  .mobile-board-menu .sub-menu li a::before {
    content: "- ";
    color: var(--text-muted);
  }
  
  /* 모바일 메뉴바 스타일 조정 */
  .menu-header .ht-menu-wrapper {
    height: auto !important;
    padding: 0 15px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .menu-header .ht-menu-nav .primary-menu {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .menu-header .ht-menu-nav .primary-menu li a {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* 모바일 메뉴 패널 표시 */
  .mobile-menu-panel {
    display: block;
  }
  
  /* 모바일에서 패널 레이아웃 조정 */
  .container {
    flex-direction: column !important;
  }
  
  /* 모바일에서 right panel 숨김 */
  .right-panels {
    display: none !important;
  }
  
  /* 모바일에서 left panel 전체 너비 */
  .left-panels {
    width: 100% !important;
  }
}

/* =============================
   Footer 스타일
   ============================= */

.site-footer {
  width: 100%;
  /* 배경색 제거 - 테마 옵션의 footer 디자인이 적용되도록 */
  padding: 0;
}

.site-footer .container {
  max-width: var(--layout-max-width, 1200px);
  margin: 0 auto;
  padding: 0 17px;
  /* 가운데 정렬 개선 */
  display: block;
}

.ht-boxed-layout .site-footer .container {
  max-width: var(--layout-max-width, 1200px);
}

.ht-wide-layout .site-footer .container {
  max-width: 100%;
}

/* =============================
   기본 레이아웃 스타일
   ============================= */

/* AI 포럼 레벨 시스템 스타일 */
.ai-forum-user-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* 공통 레벨 배지 베이스 스타일 (게시판/랭킹/모달 공용) */
.ai-forum-level-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  min-width: 0 !important;
  color: #fff !important;
}

.ai-forum-level-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.ai-forum-points {
  font-weight: 500;
  color: #666;
}

.ai-forum-mobile-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

/* 랭킹 패널 스타일 */
.ranking-panel {
  width: 100%;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 0;
  overflow: hidden;
  min-height: 180px;
}

.ranking-list {
  padding: 0 0 0 0; /* 좌우 패딩 제거 */
}

.ranking-item {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 15px;
  font-size: 13px;
  position: relative; /* 추가: 레이아웃 안정화 */
}

/* 마우스 오버 시 텍스트/배지 위치가 변하지 않도록 레이아웃 고정 */
.ranking-item .user-name,
.ranking-item .user-level,
.ranking-item .user-points {
  position: relative;
}

.ranking-item:hover {
  background-color: #f8f9fa;
  border-radius: 0;
}

.rank-number {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
}

.ranking-item:nth-child(1) .rank-number {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #333;
}

.ranking-item:nth-child(2) .rank-number {
  background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
  color: #333;
}

.ranking-item:nth-child(3) .rank-number {
  background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
  color: white;
}

.user-name {
  flex: 1;
  font-weight: 500;
  color: #333;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-level {
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 0;
  margin-right: 6px;
  flex-shrink: 0;
  display: inline-flex; /* 추가: 인라인 플렉스로 변경 */
  align-items: center; /* 추가: 수직 중앙 정렬 */
  justify-content: center; /* 추가: 수평 중앙 정렬 */
}

.user-points {
  font-weight: 600;
  color: #667eea;
  font-size: 12px;
  flex-shrink: 0;
}

/* 사용자 하위 패널 리스트 아이템 높이 - 모든 탭 28px로 통일 */
.user-subpanel .my-comments-list li,
.user-subpanel .my-posts-list li,
.user-subpanel .ip-list li,
.user-subpanel .notice-list li {
  height: 28px !important;
}

/* 사용자 하위 패널 리스트 컨테이너 좌우 패딩 통일 */
.user-subpanel .my-comments-list,
.user-subpanel .ip-list,
.user-subpanel .notice-list {
  margin: 0;
  padding-left: 16px;
  padding-right: 16px; /* 오른쪽 패딩 추가 */
}

.user-subpanel .ip-list li a,
.user-subpanel .notice-list li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  width: 100%;
}

/* 레벨 진행률 바 */
.level-progress {
  width: 100%;
  height: 4px;
  background-color: #e9ecef;
  border-radius: 0;
  overflow: hidden;
  margin-top: 2px;
}

.level-progress > div {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
}

/* AI 포럼 레벨 시스템 관리자 스타일 */
.ai-forum-level-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.ai-forum-level-details {
  font-size: 11px;
  color: #666;
  line-height: 1.3;
}

.ai-forum-level-progress {
  width: 100px;
  height: 6px;
  background-color: #e9ecef;
  border-radius: 0;
  overflow: hidden;
}

.ai-forum-level-progress > div {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease;
}

/* 모바일에서 랭킹 패널 조정 */
@media (max-width: 768px) {
  .ranking-item {
    font-size: 12px;
    padding: 6px 0;
  }
  
  .rank-number {
    width: 20px;
    height: 20px;
    font-size: 10px;
    margin-right: 6px;
  }
  
  .user-level {
    font-size: 8px;
    padding: 1px 3px;
    margin-right: 4px;
  }
  
  .user-points {
    font-size: 11px;
  }
  
  /* 데스크톱 요소 완전 숨김 */
  .desktop-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  /* 모바일에서 검색바 완전 제거 - 강력한 규칙 */
  .search-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }
  
  /* 모바일에서 로고와 사용자 정보를 같은 줄에 배치 */
  .top-header-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  
  /* 모바일 사용자 정보 요소들 강제 한 줄 배치 */
  .mobile-user-name,
  .ai-forum-level-badge,
  .ai-forum-points,
  .mobile-logout-btn {
    display: inline-block !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }
  
  /* 햄버거 메뉴 - 제일 왼쪽 */
  .mobile-menu-toggle {
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    display: block !important;
  }
  
  /* 로고 - 중간 */
  .site-branding {
    flex: 1 !important;
    margin: 0 10px !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  
  /* 사용자 정보 - 제일 오른쪽 (강제 오른쪽 정렬) */
  .mobile-user-menu {
    flex-shrink: 0 !important;
    min-width: 120px !important;
    max-width: 200px !important;
    display: block !important;
    z-index: 1 !important;
    margin: 0 10px !important;
    padding: 4px 0 !important;
    position: static !important;
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  
  /* user-info 내부 요소들 강제 오른쪽 정렬 */
  .mobile-user-menu .mobile-user-info {
    justify-content: flex-end !important;
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    flex-direction: row-reverse !important;
  }
  
  /* user-info 내부 모든 요소들 강제 오른쪽 정렬 */
  .mobile-user-menu .mobile-user-info > * {
    text-align: right !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* 사용자명 강제 오른쪽 정렬 */
  .mobile-user-menu .mobile-user-name {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  
  /* 레벨 배지와 포인트 강제 오른쪽 정렬 */
  .mobile-user-menu .ai-forum-level-badge,
  .mobile-user-menu .ai-forum-points {
    text-align: right !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
  }
  
  /* 로그아웃 버튼 강제 오른쪽 정렬 */
  .mobile-user-menu .mobile-logout-btn {
    text-align: right !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
  }
  
  /* top-header-content에서 mobile-user-menu 강제 오른쪽 배치 */
  .top-header-content .mobile-user-menu {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* 상위 프레임에서 강제 오른쪽 정렬 */
  .top-header-content {
    justify-content: flex-start !important;
    align-items: center !important;
  }
  
  /* 햄버거 메뉴는 왼쪽 고정 */
  .top-header-content .mobile-menu-toggle {
    flex-shrink: 0 !important;
    margin-right: 10px !important;
  }
  
  /* 로고는 중앙 고정 */
  .top-header-content .site-branding {
    flex: 1 !important;
    text-align: center !important;
    margin: 0 10px !important;
  }
  
  /* user-menu는 오른쪽 끝으로 강제 이동 */
  .top-header-content .mobile-user-menu {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* top-header 안의 mobile-user-menu는 숨김 */
  .top-header .mobile-user-menu {
    display: none !important;
  }
}

/* 모든 드롭다운 메뉴의 z-index를 user-info보다 높게 설정 */
.ht-submenu-dropdown {
    z-index: 10010 !important;
}

.ht-my-account-hitarea {
    z-index: 10011 !important;
}

/* MangBoard 사용자 메뉴 드롭다운도 최상위로 */
.mb_user_menu {
    z-index: 10010 !important;
}

/* 네비게이션 메뉴 드롭다운 */
.ht-menu-nav ul ul {
    z-index: 10010 !important;
}

/* ===== WordPress 관리자 도구모음 완전 숨김 ===== */
#wpadminbar {
    display: none !important;
}

body.admin-bar #wpadminbar {
    display: none !important;
}

body.admin-bar {
    margin-top: 0 !important;
}

html {
    margin-top: 0 !important;
}

body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ===== WordPress 관리자 도구모음 완전 숨김 ===== */
#wpadminbar {
    display: none !important;
}

body.admin-bar #wpadminbar {
    display: none !important;
}

body.admin-bar {
    margin-top: 0 !important;
}

html {
    margin-top: 0 !important;
}

/* body 스타일은 위쪽에 이미 정의됨 - 중복 제거 */

/* 균등 분할: 사용자 서브패널 탭 */
.user-subpanel .tab-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  padding: 0 !important;
}
.user-subpanel .tab-buttons .tab-button {
  width: 100% !important;
  text-align: center !important;
  padding: 8px 0 !important;
}
/* 사용자 서브패널 컨텐츠 스크롤 제거 */
.user-subpanel { overflow: visible !important; }
.user-subpanel .tab-content { max-height: none !important; overflow: visible !important; }
/* 중복 제거됨 - 아래 통합 규칙으로 이동 */
.user-subpanel .my-comments-list,
.user-subpanel .my-posts-list { list-style: none; margin: 0; padding-left: 16px; padding-right: 16px; }
/* 중복 제거됨 - 아래 !important 규칙으로 통합 */

/* 사용자 서브패널 헤더: 중앙 정렬 및 균등 분할, 여백 제거 */
.user-subpanel .panel-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 8px !important;
}
.user-subpanel .panel-header .tab-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
  white-space: normal !important;
  overflow: visible !important;
  padding: 0 !important;
}
.user-subpanel .panel-header .tab-buttons .tab-button {
  width: 100% !important;
  text-align: center !important;
  padding: 8px 0 !important;
}

/* 사용자 서브패널 탭 버튼 내용 중앙 정렬 */
.user-subpanel .tab-buttons .tab-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid transparent !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
}

/* 사용자 서브패널 활성 탭 버튼 */
.user-subpanel .tab-buttons .tab-button.active {
  border-bottom: 2px solid var(--primary-color) !important;
  margin-bottom: -1px !important;
}

/* 사용자 서브패널 호버 탭 버튼 */
.user-subpanel .tab-buttons .tab-button:hover {
  border-bottom: 1px solid transparent !important;
}

/* 패널 제목(헤더) 폰트 일치 */
.panel-header h3,
.user-subpanel .panel-header h3,
.news-panel .panel-header h3,
.latest-popular-panel .panel-header h3,
.hot-panel .panel-header h3,
.ranking-panel .panel-header h3,
.popular-boards-panel .panel-header h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* 패널 내용(리스트/항목) 폰트 일치: 13px */
.post-item .title,
.ranking-item,
.user-subpanel .my-comments-list,
.user-subpanel .my-comments-list a,
.user-subpanel .my-comments-list span,
.user-subpanel .my-posts-list,
.user-subpanel .my-posts-list a,
.user-subpanel .my-posts-list span,
.popular-boards-panel .post-list,
.popular-boards-panel .post-item,
.popular-boards-panel .post-item .title {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* 내코멘트 패널 항목 링크 높이 조정 */
.user-subpanel .my-comments-list a,
.user-subpanel .my-posts-list a,
.user-subpanel .ip-list a,
.user-subpanel .notice-list a {
  height: 100% !important;
  line-height: normal !important;
}

/* 비탭 패널 제목 폰트를 탭 패널과 동일하게 통일 */
.news-panel .panel-header h3,
.latest-popular-panel .panel-header h3,
.hot-panel .panel-header h3,
.ranking-panel .panel-header h3,
.popular-boards-panel .panel-header h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-color) !important;
  line-height: var(--logo-height) !important; /* 패널 헤더 높이와 일치 */
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* 패널 전역 폰트 패밀리 통일: body와 동일 적용 */
.news-panel,
.latest-popular-panel,
.hot-panel,
.ranking-panel,
.popular-boards-panel,
.user-subpanel,
.user-subpanel .panel-header,
.user-subpanel .tab-buttons,
.user-subpanel .tab-buttons .tab-button,
.panel-header h3,
.user-subpanel .panel-header h3,
.news-panel .panel-header h3,
.latest-popular-panel .panel-header h3,
.hot-panel .panel-header h3,
.ranking-panel .panel-header h3,
.popular-boards-panel .panel-header h3,
.post-list,
.post-item,
.post-item .title,
.ranking-list,
.ranking-item,
.user-subpanel .my-comments-list,
.user-subpanel .my-comments-list a,
.user-subpanel .my-comments-list span,
.user-subpanel .my-posts-list,
.user-subpanel .my-posts-list a,
.user-subpanel .my-posts-list span {
  font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif !important;
}

/* 실시간 HOT글 패널 폰트/제목/링크 통일 */
.hot-panel,
.hot-panel .panel-header,
.hot-panel .post-list,
.hot-panel .post-item,
.hot-panel .post-item .title,
.hot-panel .panel-header h3,
.hot-panel .panel-header h3 a,
.hot-panel .pagination .page-number {
  font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif !important;
}
.hot-panel .panel-header h3,
.hot-panel .panel-header h3 a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-color) !important;
  text-decoration: none !important;
  line-height: var(--logo-height) !important;
}
.hot-panel .post-item .title { font-size: 14px !important; line-height: 1.4 !important; }
.hot-panel .pagination .page-number { font-size: 12px !important; }

/* 통일된 게시판 이름 배지 디자인 */
.board-badge {
  display: inline-block !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: center !important;
  padding: 2px 6px !important;
  border-radius: 0 !important;
  background: var(--background-muted) !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* 사용자 서브패널 리스트 내 배지 폭 고정 */
.user-subpanel .my-comments-list .board-badge,
.user-subpanel .my-posts-list .board-badge {
  width: 80px !important;
}

/* 모든 패널 카테고리는 통합 .panel-category 클래스 사용 */
.news-panel .post-item .panel-category,
.latest-popular-panel .post-item .panel-category,
.hot-panel .post-item .panel-category,
.popular-boards-panel .post-item .panel-category,
.user-subpanel .my-comments-list a .panel-category,
.user-subpanel .my-posts-list a .panel-category,
.user-subpanel .notice-list a .panel-category {
  /* .panel-category의 스타일을 모든 패널에 적용 */
}

/* 뉴스 패널 카테고리 특별 설정 (필요시) */
.news-panel .post-item .panel-category { 
  /* 추가 커스터마이징이 필요하면 여기에 */
}

/* MangBoard 게시판 목록: 댓글 수 [3] 줄바꿈 방지 */
.mb-board .cmt-count, .mb-board .cmt-count-num,
.board-list .cmt-count, .board-list .cmt-count-num {
  display: inline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.mb-board .cmt-count, .board-list .cmt-count {
  margin-left: 4px !important;
  padding: 0 !important;
}

/* 댓글 수 [n]가 줄바꿈되지 않도록 강제 (플러그인 스킨의 a span block 규칙 덮어쓰기) */
.board-list table.table-list td.text-left a .cmt-count,
.board-list table.table-list td.text-left a .cmt-count-num {
  display: inline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* 홈페이지 패널 댓글 표시 스타일 (게시판과 동일한 디자인) */
.post-item .cmt-count {
  font-size: 11px !important;
  color: #AAA !important;
  margin-left: 4px !important;
  padding: 0 !important;
  display: inline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.post-item .cmt-count-num {
  font-size: 11px !important;
  color: #AAA !important;
  display: inline !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* 전역 폰트 패밀리: 맑은고딕으로 통일 */
html, body,
.news-panel, .latest-popular-panel, .hot-panel, .ranking-panel, .popular-boards-panel,
.user-subpanel, .user-subpanel .panel-header, .user-subpanel .tab-buttons, .user-subpanel .tab-buttons .tab-button,
.panel-header h3, .post-list, .post-item, .post-item .title, .ranking-list, .ranking-item,
.user-subpanel .my-comments-list, .user-subpanel .my-comments-list a, .user-subpanel .my-comments-list span,
.user-subpanel .my-posts-list, .user-subpanel .my-posts-list a, .user-subpanel .my-posts-list span,
.hot-panel .panel-header h3, .hot-panel .panel-header h3 a, .hot-panel .pagination .page-number,
.board-list, .board-list *, input, button, select, textarea, table, th, td, a, p, span, div {
  font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif !important;
}

/* 패널 게시글 내용(타이틀) 13px로 통일 */
.news-panel .post-item .title,
.latest-popular-panel .post-item .title,
.hot-panel .post-item .title,
.popular-boards-panel .post-item .title {
  font-size: 13px !important;
}

/* 사용자 서브패널: 내코멘트/내게시물 좌측 정렬 */
.user-subpanel .my-comments-list a,
.user-subpanel .my-posts-list a {
  text-align: left !important;
}
.user-subpanel .my-comments-list .col-content,
.user-subpanel .my-posts-list .col-content {
  text-align: left !important;
}
/* 보드 배지는 가운데, 날짜는 오른쪽 정렬 유지 */
.user-subpanel .my-comments-list .col-board,
.user-subpanel .my-posts-list .col-board {
  text-align: center !important;
}

/* 사용자 서브패널 리스트 콘텐츠 폰트 13px 통일 (카테고리 제외) */
.user-subpanel .my-comments-list a,
.user-subpanel .my-comments-list .title,
.user-subpanel .my-comments-list .col-date,
.user-subpanel .my-posts-list a,
.user-subpanel .my-posts-list .title,
.user-subpanel .my-posts-list .col-date {
  font-size: 13px !important;
}

/* 강제 우선순위: 모든 패널 카테고리 12px 적용 */
.user-subpanel .my-comments-list a .panel-category,
.user-subpanel .my-posts-list a .panel-category,
.panel-category.panel-category {
  font-size: 12px !important;
}

/* 사용자 서브패널 리스트 공통 구조 - 더 강력한 셀렉터 */
body .user-subpanel .my-comments-list a,
body .user-subpanel .my-posts-list a,
body .user-subpanel .ip-list a {
  display: grid !important;
  grid-template-columns: 60px 1fr 100px !important;
  gap: 8px !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 4px 0 !important;
  min-height: 28px !important;
}

/* 공지사항 탭도 3컬럼 구조 (첫번째 컬럼은 숨겨진 카테고리) */
body .user-subpanel .notice-list a {
  display: grid !important;
  grid-template-columns: 60px 1fr 100px !important;
  gap: 8px !important;
  align-items: center !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 4px 0 !important;
  min-height: 28px !important;
}


/* 사용자 서브패널 첫 번째 컬럼 (게시판/타입/카테고리) - 더 강력한 셀렉터 */
body .user-subpanel .my-comments-list a > span:nth-child(1),
body .user-subpanel .my-posts-list a > span:nth-child(1),
body .user-subpanel .ip-list a > span:nth-child(1),
body .user-subpanel .notice-list a > span:nth-child(1) {
  text-align: center !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  grid-column: 1 !important;
}


/* 사용자 서브패널 두 번째 컬럼 (내용/IP/제목) - 더 강력한 셀렉터 */
body .user-subpanel .my-comments-list a > span:nth-child(2),
body .user-subpanel .my-posts-list a > span:nth-child(2),
body .user-subpanel .ip-list a > span:nth-child(2),
body .user-subpanel .notice-list a > span:nth-child(2) {
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  grid-column: 2 !important;
  font-size: 13px !important;
}


/* 사용자 서브패널 세 번째 컬럼 (날짜) - 모든 탭 통합 */
body .user-subpanel .my-comments-list a > span:nth-child(3),
body .user-subpanel .my-posts-list a > span:nth-child(3),
body .user-subpanel .ip-list a > span:nth-child(3),
body .user-subpanel .notice-list a > span:nth-child(3) {
  text-align: right !important;
  justify-self: end !important;
  font-size: 11px !important;
  color: #999 !important;
  white-space: nowrap !important;
  grid-column: 3 !important;
  margin-left: auto !important;
}

/* 사용자 서브패널 리스트 항목 기본 간격 및 줄바꿈 방지 */
.user-subpanel .my-comments-list,
.user-subpanel .my-posts-list,
.user-subpanel .ip-list,
.user-subpanel .notice-list {
  list-style: none !important;
  margin: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.user-subpanel .my-comments-list li,
.user-subpanel .my-posts-list li,
.user-subpanel .ip-list li,
.user-subpanel .notice-list li {
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* 랭킹 배지 스타일 (컬러) */
.ai-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  min-width: 44px;
  color: #fff;
}
.ai-rank-badge.rank-1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #333;
}
.ai-rank-badge.rank-top10 {
  background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
  color: #333;
}
.ai-rank-badge.rank-top100 {
  background: linear-gradient(135deg, #cd7f32 0%, #daa520 100%);
}
.ai-rank-badge.rank-1k {
  background: #17a2b8;
}
.ai-rank-badge.rank-else {
  background: #6c757d;
}

/* 사용자 패널 아바타 상단 여백 추가 */
.personal-panel .user-avatar-col { padding-top: 20px !important; }

/* =============================
   AI 뉴스 패널 메인+서브 레이아웃
   ============================= */

/* 메인 컨테이너: 좌우 분할 레이아웃 */
.news-layout {
  display: flex;
  gap: 12px;
  width: 100%;
}

/* 메인 카드: 왼쪽 이미지+제목 카드 (뽐뿌 스타일) */
.main-post-card {
  flex: 0 0 140px; /* 고정 너비 140px */
  height: 140px; /* 140x140 정사각형 */
  position: relative;
  border-radius: 0;
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
}

.main-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 메인 카드 이미지 - 전체를 덮음 */
.main-post-image {
  width: 100%;
  height: 100%; /* 카드 전체 높이 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.main-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.main-post-card:hover .main-post-image img {
  transform: scale(1.05);
}

/* 이미지가 없는 경우 */
.main-post-image .no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-muted);
  color: var(--text-muted);
  font-size: 11px;
}

/* 하단 그라데이션 오버레이 */
.main-post-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px; /* 하단 50px 그라데이션 */
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
  z-index: 2;
}

/* 메인 카드 제목 영역 - 이미지 위에 배치 */
.main-post-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px 10px 10px;
  z-index: 3; /* 오버레이 위에 */
  height: auto;
}

.main-post-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2줄 말줄임 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: #ffffff !important; /* 흰색 텍스트 */
  text-decoration: none;
  word-break: keep-all;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 텍스트 가독성 */
  font-weight: 500;
}

.main-post-title a:hover {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* 서브 리스트: 오른쪽 기존 스타일 유지 */
.sub-posts-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sub-posts-list .post-item {
  height: 28px; /* 간격 조정 */
  padding: 0 12px;
  border-bottom: none;
  display: flex;
  align-items: center;
}


.sub-posts-list .post-item:hover {
  background: var(--background-light);
}

/* 서브 리스트 패널 카테고리 */
.sub-posts-list .post-item .panel-category {
  flex: 0 0 55px; /* 기존보다 축소 */
  max-width: 55px;
  font-size: 10px;
  color: var(--text-color);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  border: none;
  padding: 0 8px 0 0;
  text-align: left;
  line-height: 28px;
  height: 28px;
}

/* AI 뉴스 패널에서만 카테고리 숨김 (탭에 이미 표시) */
.news-panel .sub-posts-list .post-item .panel-category {
  display: none !important;
}

/* 서브 리스트 제목 */
.sub-posts-list .post-item .title {
  flex: 1;
  font-size: 13px !important; /* 제목 폰트 크기 */
  line-height: 1.3 !important;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 모든 패널의 시간 표시 통일 */
.sub-posts-list .post-item .time-ago,
.latest-popular-panel .post-item .time-ago,
.hot-panel .post-item .time-ago,
.post-item .time-ago {
  flex: 0 0 auto;
  font-size: 10px;
  color: white !important;
  background-color: #555 !important;
  padding: 1px 4px !important;
  line-height: 1 !important;
  border-radius: 0 !important;
  margin-left: 8px;
}

/* 모바일 반응형 - 좌우 분할 유지 + 오버레이 디자인 */
@media (max-width: 768px) {
  .news-layout {
    display: flex; /* 좌우 분할 유지 */
    gap: 8px;
  }
  
  .main-post-card {
    flex: 0 0 140px; /* 데스크톱과 동일한 140px */
    height: 140px; /* 데스크톱과 동일한 140px 정사각형 */
    position: relative;
    border-radius: 0;
    overflow: hidden;
  }
  
  .main-post-image {
    width: 100%;
    height: 100%; /* 카드 전체 높이 - 오버레이 디자인 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  .main-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .main-post-image .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-muted);
    color: var(--text-muted);
    font-size: 10px;
  }
  
  /* 모바일 하단 그라데이션 오버레이 */
  .main-post-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px; /* 모바일에서 40px 그라데이션 */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
    z-index: 2;
  }
  
  /* 모바일 메인 카드 제목 영역 - 이미지 위에 배치 */
  .main-post-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px 8px 8px; /* 모바일 패딩 조정 */
    z-index: 3; /* 오버레이 위에 */
    height: auto;
  }
  
  .main-post-title a {
    color: #ffffff !important; /* 흰색 텍스트 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 텍스트 가독성 */
    font-weight: 500;
    font-size: 11px !important; /* 모바일에서 더 작게 */
    line-height: 1.2 !important;
  }
  
  .sub-posts-list .post-item {
    height: 28px; /* 모바일에서 더 낮게 */
    padding: 0 8px;
  }
  
  .sub-posts-list .post-item .panel-category {
    flex: 0 0 40px;
    max-width: 40px;
    font-size: 9px;
  }
  
  .sub-posts-list .post-item .title {
    font-size: 13px !important;
  }
  
  .sub-posts-list .post-item .time-ago,
  .latest-popular-panel .post-item .time-ago,
  .hot-panel .post-item .time-ago,
  .post-item .time-ago {
    font-size: 9px;
    color: white !important;
    background-color: #555 !important;
    padding: 2px 4px;
    border-radius: 0;
  }
}/* 닉네임 변경 현황 버튼 스타일 */
.nickname-status-btn {
  display: inline-block;
  padding: 4px 8px;
  margin: 2px 0;
  background-color: #007cba;
  color: white !important;
  border: none;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.nickname-status-btn:hover {
  background-color: #005a87;
  color: white !important;
  text-decoration: none;
}

.nickname-status-btn:active {
  background-color: #004570;
}

/* 회원정보 폼 내에서의 닉네임 현황 버튼 */
.mb-form .nickname-status-btn {
  margin-left: 8px;
  vertical-align: top;
  font-size: 10px;
  padding: 3px 6px;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .nickname-status-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin: 4px 0;
    padding: 6px 8px;
  }
  
  .mb-form .nickname-status-btn {
    display: inline-block;
    width: auto;
    margin-left: 4px;
  }
}

/* 사용자 정보 영역 내 닉네임 현황 링크 */
.user-info-section .nickname-status-btn {
  background-color: transparent;
  color: #007cba !important;
  border: 1px solid #007cba;
  padding: 2px 6px;
  font-size: 10px;
}

.user-info-section .nickname-status-btn:hover {
  background-color: #007cba;
  color: white !important;
}

/* Tablet Menu Interaction Fixes
 * Updated to match JS logic: Covers tablet/touch devices up to 1400px
 * This effectively makes small laptops click-to-open as well, which is acceptable for unified behavior.
 */
@media (max-width: 1400px) {
    /* 1. Prevent Text Disappearing: Force White Text on Active/Hover */
    .ht-menu-nav .primary-menu li.menu-item-has-children.tablet-open > a,
    .ht-menu-nav .primary-menu li.menu-item-has-children:hover > a,
    .ht-menu-nav .primary-menu li a:hover {
        color: white !important; /* Keep text white against blue background */
    }

    /* 2. Disable Default Hover Behavior - Strong Overrides */
    /* 기본 호버 효과 완전 차단 (부모 테마 스타일보다 높은 우선순위) */
    .ht-menu-horizontal .ht-menu-nav li:hover > ul,
    .ht-menu-horizontal .ht-menu-nav ul li:hover > ul,
    .ht-menu-nav li:hover > ul,
    .ht-menu-nav ul li:hover > ul {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* 3. Enable Click-Toggle Behavior */
    /* .tablet-open 클래스가 있을 때만 표시 (가장 높은 우선순위) */
    .ht-site-navigation .menu-item-has-children.tablet-open > ul.sub-menu,
    .ht-menu-horizontal .ht-menu-nav li.tablet-open > ul,
    .ht-menu-nav li.tablet-open > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        z-index: 99999 !important;
    }

}

/* =============================
   MangBoard Tablet Fixes
   Scope: Tablet devices (min 768px ~ max 1400px)
   Do NOT affect Smartphone (< 768px) layout
   ============================= */

@media (min-width: 768px) and (max-width: 1400px) {
    /* MangBoard Responsive Fix: Force Table Layout and Show Hidden Columns */

    /* Ensure table rows do not turn into blocks */
    .board-list table tr,
    .mb-board table tr,
    #tbl_board_list tr {
        display: table-row !important;
    }

    /* Ensure table cells do not turn into blocks/inline-blocks */
    .board-list table td,
    .board-list table th,
    .mb-board table td,
    .mb-board table th,
    #tbl_board_list td,
    #tbl_board_list th {
        display: table-cell !important;
        padding: 6px 4px !important; /* Reduce padding for compactness */
        height: auto !important;
        line-height: 1.3 !important;
        vertical-align: middle !important;
    }

    /* Checkbox (Class Priority) */
    .mb-col-list-check,
    .board-list table tr td:nth-child(1),
    .board-list table tr th:nth-child(1) {
        display: table-cell !important;
        visibility: visible !important;
        width: 30px !important;
        text-align: center !important;
    }

    /* Number (PID) - Fixed 60px */
    .mb-col-pid, .mb-th-pid {
        display: table-cell !important;
        visibility: visible !important;
        width: 60px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Category - Fixed 80px (if exists) */
    .mb-col-category, .mb-th-category {
        display: table-cell !important;
        visibility: visible !important;
        width: 80px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Title - Auto width (Take remaining space) - Class Based */
    .mb-col-title, .mb-th-title {
        display: table-cell !important;
        visibility: visible !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
    }

    /*
     * STRICT CLASS-BASED WIDTHS
     * Removed all nth-child selectors to prevent misalignment when columns are missing.
     * High specificity ensures these override any global theme rules.
     */

    /* Title - Auto width (Take remaining space) */
    .mb-col-title, .mb-th-title,
    .mb-board .table:not(.table-page) thead tr th.mb-col-title,
    .mb-board .table:not(.table-page) tbody tr td.mb-col-title {
        display: table-cell !important;
        visibility: visible !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: normal !important;
    }

    /* Writer (Author) - Fixed 100px */
    .mb-col-writer, .mb-col-user-name, .mb-th-writer, .mb-th-user-name,
    .mb-board .table:not(.table-page) thead tr th.mb-col-writer,
    .mb-board .table:not(.table-page) tbody tr td.mb-col-writer {
        display: table-cell !important;
        visibility: visible !important;
        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        white-space: nowrap !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Date - Fixed 80px - Class Based - High Specificity */
    .mb-col-reg-date, .mb-col-date, .mb-th-reg-date, .mb-th-date,
    .mb-board .table:not(.table-page) thead tr th.mb-col-date,
    .mb-board .table:not(.table-page) tbody tr td.mb-col-date {
        display: table-cell !important;
        visibility: visible !important;
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Hit/Views - Fixed 60px - Class Based */
    .mb-col-hit, .mb-th-hit {
        display: table-cell !important;
        visibility: visible !important;
        width: 60px !important;
        text-align: center !important;
    }
}