/* SOGANG UNIVERSITY UNITY CONNECT - PROFESSIONAL BRAND STYLE */

/* ==================== 전역 변수 및 테마 정의 ==================== */
:root {
  --color-bg-base: #f4f6f9;         /* 서강대 실버/그레이를 현대적으로 해석한 은회색 */
  --color-card-bg: #ffffff;
  --color-sogang: #B60005;          /* 서강 공식 스칼렛 크림슨 */
  --color-sogang-hover: #8a0003;
  --color-sogang-gold: #C5A059;     /* 서강 공식 엠블럼 골드 */
  --color-sogang-silver: #A6A6A6;   /* 서강 공식 실버 */
  --color-sogang-glow: rgba(182, 0, 5, 0.08);
  --color-border: #e2e8f0;          
  --color-text-main: #1a202c;       
  --color-text-sub: #4a5568;        
  --color-text-dim: #a0aec0;        
  --color-bg-input: #f7fafc;
  
  --font-display: 'Inter', sans-serif;
  --font-body: 'Noto Sans KR', sans-serif;
  
  --shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.12);
  
  --radius-lg: 10px;
  --radius-md: 6px;
  --radius-sm: 4px;
  
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] {
  --color-bg-base: #0f0f11;         /* 서강대 실버/그레이를 다크모드에 맞춰 고혹적이고 깊은 차콜 블랙으로 해석 */
  --color-card-bg: #18181c;         /* 어두운 방막 카드 배경 */
  --color-sogang: #e02c32;          /* 다크모드에서 시인성을 높인 크림슨 스칼렛 */
  --color-sogang-hover: #ff4d52;    
  --color-sogang-gold: #e2be7a;     /* 다크모드 전용 샴페인 골드 */
  --color-sogang-silver: #82828e;   
  --color-sogang-glow: rgba(224, 44, 50, 0.15);
  --color-border: #26262b;          
  --color-text-main: #f1f2f6;       /* 부드럽고 가독성 높은 밝은 회백색 */
  --color-text-sub: #a0a0ab;        
  --color-text-dim: #6c6c78;        
  --color-bg-input: #202024;
  
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 36px rgba(0, 0, 0, 0.5);
}

/* ==================== 기본 스타일 초기화 ==================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 가로 스크롤 원천 차단 */
html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden; /* 모바일 가로 스크롤 방지 */
  max-width: 100vw;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 공통 헬퍼 클래스 */
.hidden {
  display: none !important;
}

/* ==================== 버튼 & 입력 양식 ==================== */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border-radius: 20px; /* 링크드인 알약 형태 버튼 */
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition);
  font-size: 0.9rem;
}

.btn-sogang {
  background-color: var(--color-sogang);
  color: #ffffff;
}
.btn-sogang:hover {
  background-color: var(--color-sogang-hover);
  box-shadow: 0 4px 10px rgba(179, 8, 56, 0.25);
}

.btn-light {
  background-color: var(--color-card-bg);
  color: var(--color-text-sub);
  border-color: var(--color-border);
}
.btn-light:hover {
  background-color: var(--color-bg-input);
  color: var(--color-text-main);
  border-color: var(--color-text-dim);
}

.btn-full {
  width: 100%;
}

/* 모바일 전용 토글 버튼 기본은 숨김 */
.mobile-sidebar-toggle-btn {
  display: none !important;
}

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

/* 입력 필드 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  width: 100%;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-sub);
}

.form-group input, 
.form-group textarea,
.form-group select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  color: var(--color-text-main);
  transition: var(--transition);
}

.form-group input:focus, 
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-sogang);
  background-color: var(--color-card-bg);
  box-shadow: 0 0 0 3px var(--color-sogang-glow);
}

/* 알림 영역 */
.alert {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.alert-danger {
  background-color: #ffebee;
  border: 1px solid #ffcdd2;
  color: #c62828;
}

/* ==================== LOGIN GATEWAY PORTAL ==================== */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: radial-gradient(circle at center, #3a0002 0%, #0f0001 100%);
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(197, 160, 89, 0.15) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(182, 0, 5, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.brand-logo {
  width: 70px;
  height: 70px;
  margin: 0 auto 0.75rem;
}

.logo-svg {
  width: 100%;
  height: 100%;
}

.brand-title {
  font-family: var(--font-display), var(--font-body);
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--color-sogang);
  letter-spacing: -0.5px;
}

.brand-subtitle {
  color: var(--color-text-sub);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.login-form {
  margin-bottom: 1.5rem;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-text-dim);
  margin: 1.2rem 0;
  font-size: 0.8rem;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--color-border);
}

.divider:not(:empty)::before { margin-right: .5em; }
.divider:not(:empty)::after { margin-left: .5em; }

.login-footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-dim);
  line-height: 1.5;
}

.login-footer .hint {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  background-color: #f9f9f9;
  padding: 0.4rem;
  border-radius: 4px;
  border: 1px dashed var(--color-border);
}

/* ==================== DASHBOARD CONTAINER ==================== */
.dashboard-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 100%; /* 가로 스크롤 방지 */
  overflow-x: hidden;
}

/* 상단 네비게이션 바 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.25rem; /* 2rem → 1.25rem으로 충소 (모바일 오버플로우 방지) */
  background: linear-gradient(135deg, var(--color-sogang) 0%, #8a0003 100%);
  border-bottom: 2px solid var(--color-sogang-gold);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(182, 0, 5, 0.15);
  height: 56px;
  color: #ffffff;
}

.navbar-left {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  justify-content: flex-start;
}

.navbar-center {
  display: none;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
}

.nav-logo {
  width: 28px;
  height: 28px;
}

.nav-title {
  font-family: var(--font-display), var(--font-body);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  white-space: nowrap;
}

.search-box {
  position: relative;
  width: 100%;
}

.search-box i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
}

.search-box input {
  font-family: var(--font-body);
  font-size: 0.85rem;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem 0.5rem 2.2rem;
  border-radius: 4px;
  width: 100%;
  color: #ffffff;
  transition: var(--transition);
}

.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-box input:focus {
  outline: none;
  background-color: var(--color-card-bg);
  border-color: var(--color-sogang-gold);
  color: var(--color-text-main);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 0%;
  justify-content: flex-end;
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-sogang-gold);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.8rem;
  font-family: var(--font-display);
}

.user-name {
  color: #ffffff;
  font-weight: 700;
}

.btn-logout {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  transition: var(--transition);
}

.btn-logout:hover {
  color: var(--color-sogang-gold);
}

/* ==================== DIRECTORY LAYOUT ==================== */
.directory-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  max-width: 1200px;
  width: 100%;
  margin: 1.25rem auto;
  padding: 0 1rem;
  box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
}

/* 사이드바 스타일 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* 사용자 미니 프로필 카드 */
.user-mini-card .mini-card-banner {
  height: 54px;
  background: linear-gradient(135deg, var(--color-sogang) 0%, var(--color-sogang-gold) 100%);
}

.user-mini-card .mini-card-content {
  padding: 0 1rem 1.2rem;
  text-align: center;
  position: relative;
}

.user-mini-card .mini-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--color-card-bg);
  margin: -30px auto 0.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-sogang);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: var(--font-display);
}

.user-mini-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-main);
}

.user-mini-card p {
  font-size: 0.75rem;
  color: var(--color-text-sub);
  margin-top: 0.15rem;
}

.sidebar-headline {
  margin-top: 0.75rem !important;
  font-size: 0.75rem !important;
  line-height: 1.4;
  color: var(--color-text-sub) !important;
  border-top: 1px solid #f3f2ef;
  padding-top: 0.75rem;
}

/* 관리자 콘솔 카드 */
.admin-console-panel {
  padding: 1.2rem;
  border: 1px solid var(--color-sogang);
  background-color: rgba(179, 8, 56, 0.02);
}

.admin-console-panel h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-sogang);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.admin-desc {
  font-size: 0.72rem;
  color: var(--color-text-sub);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.text-gold {
  color: #cca43b;
}

/* 기수 필터 및 태그 필터 패널 */
.generation-filter-panel, 
.tag-filter-panel,
.quick-links-panel {
  padding: 1rem 1.2rem;
}

.generation-filter-panel h4,
.tag-filter-panel h4,
.quick-links-panel h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 0.6rem;
}

.quick-links-panel h4 i {
  color: var(--color-sogang-gold);
  margin-right: 0.3rem;
}

.select-generation {
  width: 100%;
  cursor: pointer;
}

.filter-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.btn-tag {
  background-color: var(--color-bg-input);
  color: var(--color-text-sub);
  border: none;
  font-family: var(--font-body);
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-tag:hover {
  background-color: var(--color-border);
  color: var(--color-text-main);
}

.btn-tag.active {
  background-color: var(--color-sogang);
  color: #ffffff;
}

.btn-clear-filter {
  background: transparent;
  border: none;
  color: var(--color-sogang);
  font-size: 0.72rem;
  cursor: pointer;
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-body);
  font-weight: 700;
}

/* ==================== 메인 콘텐츠 탭 컨트롤 스타일 ==================== */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 대시보드 메인 탭바 */
.dashboard-tabs {
  display: flex;
  background-color: var(--color-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.tab-nav-btn {
  flex: 1;
  background-color: transparent;
  border: none;
  padding: 0.85rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: var(--transition);
  border-bottom: 3px solid transparent;
}

.tab-nav-btn:hover {
  color: var(--color-sogang);
  background-color: rgba(179, 8, 56, 0.02);
}

.tab-nav-btn.active {
  color: var(--color-sogang);
  border-bottom-color: var(--color-sogang);
  background-color: rgba(179, 8, 56, 0.04);
}

.tab-panel-content {
  animation: fade-in 0.2s ease-out;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 콘텐츠 헤더 툴바 */
.content-header-toolbar {
  background-color: var(--color-card-bg);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.content-header-toolbar h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-main);
}

/* 뷰 모드 스위치 컨테이너 */
.view-toggle-container {
  display: flex;
  background-color: var(--color-bg-input);
  border-radius: var(--radius-md);
  padding: 2px;
  border: 1px solid var(--color-border);
}

.btn-view-toggle {
  background-color: transparent;
  border: none;
  color: var(--color-text-sub);
  padding: 0.3rem 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.btn-view-toggle:hover {
  color: var(--color-text-main);
}

.btn-view-toggle.active {
  background-color: var(--color-card-bg);
  color: var(--color-sogang);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==================== MEMBERS GRID & LIST VIEWS ==================== */

/* 1. GRID VIEW (기본 카드 그리드형 - 대용량 콤팩트 스케일링) */
.members-grid.grid-view {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 데스크톱 (사이드바 있음) -> 기본 3열 */
  gap: 1rem;
}

.grid-view .member-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
  transition: var(--transition);
  min-height: 270px;
}

.grid-view .member-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  transform: translateY(-4px);
  border-color: var(--color-text-dim);
}

.grid-view .card-banner {
  display: none;
}

.grid-view .card-avatar {
  width: 56px; /* 아바타 크기 축소 */
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--color-card-bg);
  margin: 1.5rem auto 0.5rem;
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: var(--font-display);
}

.grid-view .card-body {
  padding: 0 0.8rem 0.8rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.grid-view .card-name-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.25rem;
}

.grid-view .card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-main);
}

.grid-view .card-class {
  font-size: 0.72rem;
  color: var(--color-text-sub);
}

.grid-view .card-headline {
  font-size: 0.75rem;
  color: var(--color-text-main);
  line-height: 1.4;
  height: 2.8em; /* 2줄 크기 제한 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.4rem;
}

.grid-view .card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.6rem;
  margin-bottom: auto;
}

.grid-view .card-tag {
  font-size: 0.65rem;
  background-color: var(--color-bg-input);
  color: var(--color-text-sub);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.grid-view .card-footer {
  padding: 0 0.8rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.grid-view .card-contacts {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
}

.grid-view .contact-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-bg-input);
  color: var(--color-text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: var(--transition);
}

.grid-view .contact-icon:hover {
  background-color: var(--color-sogang);
  color: #ffffff;
}

.grid-view .btn-view-profile {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  background-color: transparent;
  color: var(--color-sogang);
  border: 1px solid var(--color-sogang);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
  width: 100%;
}

.grid-view .btn-view-profile:hover {
  background-color: var(--color-sogang-glow);
}

/* 관리자 삭제 아이콘 위치 조절 (그리드뷰) */
.grid-view .card-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background-color: rgba(255, 23, 68, 0.85);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  z-index: 10;
}


/* 2. LIST VIEW (가로 한 줄 리스트 목록형 - 30인 초고속 압축 탐색) */
.members-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.list-view .member-card {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.4rem;
  gap: 1.25rem;
  position: relative;
  border-left: 4px solid var(--cohort-color, var(--color-sogang)); /* 기수별 고유 색상 바인딩 (폴백은 서강 크림슨) */
  transition: 
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    border-left-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.list-view .member-card:hover {
  transform: translateX(4px); /* 오른쪽으로 살짝 밀리는 스마트 모션 */
  border-left-width: 6px; /* 호버 시 포인트바가 조금 더 강조됨 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  border-color: var(--color-text-dim);
  background-color: var(--color-bg-input);
}

/* 다크모드 시 호버 그림자 강도 조정 */
html[data-theme="dark"] .list-view .member-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.list-view .card-banner {
  display: none; /* 가로형에서는 배너 은닉 */
}

.list-view .card-avatar {
  width: 44px; /* 살짝 키움 */
  height: 44px;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: var(--font-display);
}

.list-view .card-body {
  display: grid;
  /* 가로 배분: 이름/기수(160px 확보) | 한줄 헤드라인(1.5fr) | 관심 태그(1fr) */
  grid-template-columns: 160px 1.5fr 1fr;
  align-items: center;
  gap: 1.2rem;
  flex: 1;
  padding: 0;
}

.list-view .card-name-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 0.15rem;
  overflow: hidden; /* 자식 요소 삐져나감 방지 */
}

.list-view .card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-main);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-view .card-class {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cohort-color, var(--color-text-sub));
  background-color: var(--color-bg-base);
  padding: 0.08rem 0.4rem;
  border-radius: 4px;
  width: fit-content;
  max-width: 100%; /* 부모 너비 안으로 제한 */
  border: 1px solid var(--color-border);
  white-space: nowrap; /* 한 줄로 강제 유지 */
  overflow: hidden;
  text-overflow: ellipsis; /* 길어질 경우 예쁘게 말줄임표 처리 */
}

.list-view .card-headline {
  font-size: 0.82rem;
  color: var(--color-text-main);
  text-align: left;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 최대 2줄까지 내용 생략 없이 풍부하게 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* 2줄 노출을 위해 강제 1줄 해제 */
  letter-spacing: -0.01em;
  font-weight: 400;
  word-break: keep-all; /* 한글 단어 단위 개행으로 깔끔함 유지 */
}

.list-view .card-headline:empty::before,
.list-view .card-headline[style*="display: none"] + *,
.list-view .card-headline:blank::before {
  content: "원우 한 줄 소개가 등록되지 않았습니다.";
  color: var(--color-text-dim);
  font-style: italic;
  font-size: 0.78rem;
}

.list-view .card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.25rem;
  margin: 0;
  overflow: hidden;
  max-height: 24px;
}

.list-view .card-tag {
  font-size: 0.68rem;
  background-color: var(--color-bg-base);
  color: var(--color-text-sub);
  padding: 0.1rem 0.45rem;
  border-radius: 12px; /* Pill style */
  white-space: nowrap;
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.list-view .card-tag:hover {
  background-color: var(--color-card-bg);
  border-color: var(--color-sogang);
  color: var(--color-sogang);
  transform: translateY(-1px);
}

.list-view .card-footer {
  display: flex;
  flex-direction: row !important; /* 가로 1줄로 납작하게 누움 */
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0;
}

.list-view .card-contacts {
  display: flex;
  gap: 0.35rem !important; /* 가로 공간 절약을 위해 간격 축소 */
  border-top: none;
  padding-top: 0;
}

.list-view .card-email-row {
  margin: 0 !important;
  padding: 0.2rem 0.45rem;
  max-width: 120px;
  font-size: 0.68rem;
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border);
}

.list-view .card-email-row .email-text {
  max-width: 80px;
}

.list-view .contact-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-bg-base);
  color: var(--color-text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  border: 1px solid var(--color-border);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.list-view .contact-icon:hover {
  background-color: var(--color-sogang);
  color: #ffffff;
  border-color: var(--color-sogang);
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 3px 6px rgba(182, 0, 5, 0.15);
}

.list-view .btn-view-profile {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  background-color: transparent;
  color: var(--color-sogang);
  border: 1px solid var(--color-sogang);
  padding: 0.35rem 0.9rem;
  border-radius: 30px; /* 더욱 둥글고 세련되게 */
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.list-view .btn-view-profile:hover {
  background-color: var(--color-sogang);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(182, 0, 5, 0.2);
}

/* 관리자 삭제 아이콘 위치 조절 (리스트뷰) */
.list-view .card-delete-btn {
  position: static; /* 그리드 절대 배치 탈피 */
  width: 26px;
  height: 26px;
  background-color: rgba(255, 23, 68, 0.1);
  color: #ff1744;
  border: 1px solid rgba(255, 23, 68, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  order: 3; /* 우측 끝으로 밀어 넣음 */
  transition: var(--transition);
}

.list-view .card-delete-btn:hover {
  background-color: #ff1744;
  color: #ffffff;
  border-color: #ff1744;
  transform: none;
}

/* ==================== 방명록 코멘트 피드 (FEED SECTION) ==================== */
.feed-section {
  background-color: var(--color-card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
  margin-bottom: 1.2rem;
}

.feed-header h3 {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-main);
}

.comment-count {
  font-size: 0.75rem;
  background-color: var(--color-bg-input);
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  color: var(--color-text-sub);
  font-weight: 500;
}

/* 방명록 인풋창 */
.feed-input-box {
  background-color: var(--color-bg-input);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.feed-form-header {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.feed-form-header input,
.feed-form-header select {
  font-family: var(--font-body);
  font-size: 0.8rem;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-main);
}

.feed-form-header input:focus,
.feed-form-header select:focus {
  outline: none;
  border-color: var(--color-sogang);
}

.feed-form-body {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.feed-form-body textarea {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.85rem;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-main);
  resize: none;
}

.feed-form-body textarea:focus {
  outline: none;
  border-color: var(--color-sogang);
}

/* 방명록 피드 리스트 */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-height: 550px; /* 피드창 높이 제한 및 독립 스크롤 제공 */
  overflow-y: auto;
  padding-right: 0.5rem;
}

.comment-card {
  border: 1px solid var(--color-border);
  background-color: var(--color-card-bg);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  transition: var(--transition);
}

.comment-card:hover {
  background-color: #fafafa;
}

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

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.comment-badge-tag {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-weight: bold;
}
.comment-badge-tag.cheer { background-color: #ffebee; color: #c62828; }
.comment-badge-tag.question { background-color: #e3f2fd; color: #1565c0; }
.comment-badge-tag.coffee { background-color: #fff8e1; color: #f57f17; }
.comment-badge-tag.feedback { background-color: #e8f5e9; color: #2e7d32; }

.comment-time {
  font-size: 0.7rem;
  color: var(--color-text-dim);
  font-family: var(--font-display);
}

.comment-body {
  font-size: 0.85rem;
  color: var(--color-text-main);
  line-height: 1.4;
  white-space: pre-line;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  border-top: 1px solid #f6f6f6;
  padding-top: 0.4rem;
}

.comment-btn {
  background: transparent;
  border: none;
  color: var(--color-text-sub);
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-body);
}

.comment-btn:hover {
  color: var(--color-sogang);
}

.comment-delete-btn {
  color: var(--color-text-dim);
}
.comment-delete-btn:hover {
  color: #ff1744;
}

/* ==================== MODAL WINDOW SYSTEM ==================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: modal-fade-in 0.2s ease-out;
  padding: 1rem;
}

.modal-card {
  width: 100%;
  max-width: 680px; /* 약간 넓힘 */
  background-color: var(--color-card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(182, 0, 5, 0.05);
  position: relative;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-slide-up 0.3s cubic-bezier(0.1, 0.8, 0.2, 1);
  border: 1px solid rgba(197, 160, 89, 0.2);
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-bg-input);
  color: var(--color-text-main);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  z-index: 10;
  transition: var(--transition);
}

.modal-close-btn:hover {
  background-color: var(--color-sogang);
  color: #ffffff;
}

.modal-content {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
}

/* 상세 뷰 모드 */
.modal-header-info {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.modal-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--color-card-bg);
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--color-sogang-gold);
  font-family: var(--font-display);
  flex-shrink: 0; /* 아바타가 강제로 작아지며 텍스트를 침범하는 것을 방지 */
}

.modal-identity {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 0;
  min-width: 0; /* flex-item 수축을 가능하게 하여 자식이 가로폭을 터트리는 현상 방지 */
}

.name-edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start; /* 이름 바로 옆에 수정 버튼이 위치하여 가로 겹침 원천 차단 */
}

.name-edit-row h2 {
  font-size: 1.40rem;
  font-weight: 700;
  color: var(--color-text-main);
}

.btn-edit-profile {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  background-color: transparent;
  color: var(--color-sogang);
  border: 1px solid var(--color-sogang);
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-edit-profile:hover {
  background-color: var(--color-sogang-glow);
}

.modal-class {
  font-size: 0.88rem;
  color: var(--color-text-sub);
  margin-top: 0.25rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.modal-class::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-sogang-gold);
  border-radius: 50%;
}

.modal-headline {
  font-size: 0.95rem;
  color: var(--color-text-main);
  margin-top: 0.5rem;
  font-weight: 700;
  line-height: 1.4;
  border-left: 3px solid var(--color-sogang-gold);
  padding-left: 0.6rem;
  white-space: normal; /* 긴 소개글이 자연스럽게 개행되도록 보장 */
  word-break: break-all; /* 단어 경계 없이 강제 개행되도록 하여 삐져나감 방지 */
}

.modal-contact-row {
  display: flex;
  flex-wrap: wrap; /* 소셜 단추가 많을 때 넘치면 다음 줄로 이쁘게 흐르게 유도 */
  gap: 0.5rem;
  margin-top: 0.75rem;
  width: 100%;
}

.modal-contact-row .btn {
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap; /* 텍스트가 가로 수축 시 강제로 끊겨 세로로 찌그러지는 현상 방지 */
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  transition: var(--transition);
}

.modal-contact-row .btn-light {
  background-color: var(--color-bg-input);
  border-color: var(--color-border);
  color: var(--color-text-main);
}

.modal-contact-row .btn-light:hover {
  background-color: var(--color-sogang-glow);
  border-color: var(--color-sogang);
  color: var(--color-sogang);
}

/* 상세 탭/섹션 구조 */
.modal-body-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}

.modal-section {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: var(--transition);
}

.modal-section:hover {
  border-color: rgba(197, 160, 89, 0.3);
  box-shadow: 0 4px 12px rgba(197, 160, 89, 0.05);
}

.modal-section h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid #f1f3f7;
  padding-bottom: 0.5rem;
}

.section-text {
  font-size: 0.85rem;
  color: var(--color-text-main);
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  white-space: pre-wrap;
  line-height: 1.7;
}


.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* 편집 모드 스타일 */
.modal-edit-mode h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 1.5rem;
}

.edit-hint {
  font-size: 0.75rem;
  color: var(--color-text-sub);
  margin-bottom: 1.2rem;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row.split {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 0.5rem;
}

.form-row.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.edit-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid #f3f2ef;
  padding-top: 1rem;
  margin-top: 1rem;
}

/* ==================== ANIMATIONS KEYFRAMES ==================== */
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== RESPONSIVE MEDIA QUERIES ==================== */
@media (max-width: 1150px) {
  .list-view .card-email-row {
    display: none !important; /* 가로폭이 좁아지는 구간에서 공간 확보를 위해 이메일 캡슐 숨김 */
  }
}

@media (max-width: 990px) {
  .list-view .card-body {
    grid-template-columns: 120px 1fr; /* 태그 열을 아래로 밀거나 생략 */
  }
  .list-view .card-tags {
    display: none; /* 중간 태블릿 사이즈에서는 해시태그 생략해 깔끔함 유지 */
  }
}

@media (max-width: 900px) {
  .directory-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .members-grid.grid-view {
    grid-template-columns: repeat(3, 1fr) !important; /* 사이드바 접히므로 공간 확보되어 다시 3열 */
  }

  /* 모바일 필터 및 설정 토글 버튼 노출 */
  .mobile-sidebar-toggle-btn {
    display: inline-flex !important;
    width: 100%;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    color: var(--color-sogang);
    border: 1px solid var(--color-sogang);
    background-color: var(--color-card-bg);
    box-shadow: 0 2px 8px rgba(182, 0, 5, 0.05);
    padding: 0.65rem 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    transition: var(--transition);
    cursor: pointer;
  }

  .mobile-sidebar-toggle-btn:hover {
    background-color: var(--color-sogang-glow);
  }

  /* 모바일에서 사이드바 내부 4개 카드 아코디언 토글 대응 */
  .sidebar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-bottom 0.3s !important;
  }

  .sidebar.active-mobile {
    max-height: 1500px !important; /* 넉넉한 스케일 부여 */
    opacity: 1 !important;
    margin-bottom: 1.5rem !important;
    overflow: visible !important; /* 드롭다운 잘림 방지 */
  }

  /* 미니프로필 카드는 항상 전체 너비 */
  .sidebar .user-mini-card {
    grid-column: 1 / -1;
  }

  .user-mini-card .mini-card-banner {
    height: 40px;
  }
  
  .user-mini-card .mini-avatar {
    width: 48px;
    height: 48px;
    margin-top: -24px;
    font-size: 1.2rem;
  }

  /* ---- 네비게이션 바 모바일 압축 모드를 900px 이하로 앞당김 ---- */
  .navbar {
    padding: 0.5rem 0.75rem;
    height: 50px;
  }

  .navbar-left {
    flex: 0 0 auto;
    gap: 0.5rem;
  }

  .navbar-center {
    display: none;
  }

  .navbar-right {
    flex: 1 1 0%;
    justify-content: flex-end;
    gap: 0.4rem; /* 아이콘 5개를 위해 간격 축소 */
  }

  .nav-title {
    display: none; /* 모바일에서 타이틀 숨겨서 공간 확보 */
  }

  /* 네비바 버튼 아이콘 전용 모드 */
  .nav-tab-btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    gap: 0;
  }

  .btn-text {
    display: none; /* 모바일에서 버튼 텍스트 숨기고 아이콘만 표시 */
  }

  .user-name {
    display: none; /* 아바타만 표시 */
  }

  /* 로그아웃 버튼 아이콘 전용 */
  .btn-logout {
    padding: 0.35rem 0.4rem;
  }

  .search-box input {
    padding-left: 2rem;
  }

  /* 모바일 알림 팝오버 화면 이탈 방지 */
  .notif-popover {
    position: absolute !important;
    right: -15px !important;
    left: auto !important;
    width: 290px !important;
  }
}

@media (max-width: 650px) {
  .sidebar {
    grid-template-columns: 1fr;
  }
  
  .form-row.split,
  .form-row.split-2 {
    grid-template-columns: 1fr;
  }

  /* 네비바 모바일 관련 스타일은 900px 이하 미디어 쿼리로 통합 이동됨 */

  /* 콘텐츠 헤더 툴바 세로 배치 */
  .content-header-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.6rem 0.8rem;
    gap: 0.5rem;
  }

  .content-header-toolbar h3 {
    font-size: 0.95rem;
  }

  .view-toggle-container {
    width: 100%;
  }
  .btn-view-toggle {
    flex: 1;
    justify-content: center;
  }

  .modal-header-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1rem;
    gap: 0.75rem;
  }

  .modal-identity {
    align-items: center;
    width: 100%;
  }

  .name-edit-row {
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .modal-contact-row {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .feed-form-header {
    grid-template-columns: 1fr;
  }

  .feed-form-body {
    flex-direction: column;
    align-items: stretch;
  }

  .feed-form-body button {
    width: 100%;
  }

  /* 모바일 가로 리스트뷰 보정 (초슬림 콤팩트 한 줄 목록화) */
  .list-view .member-card {
    flex-direction: row !important; /* 모바일에서도 세로로 꺾이지 않고 가로 한 줄 유지 */
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.45rem 0.75rem !important; /* 높이 극소화 */
    gap: 0.6rem !important;
    border-left-width: 3px !important;
  }

  .list-view .card-avatar {
    width: 32px !important; /* 아바타 소형화 */
    height: 32px !important;
    font-size: 0.9rem !important;
    margin-bottom: 0 !important; /* 마진 제거 */
    box-shadow: none !important;
  }

  .list-view .card-body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
    flex: 1 !important;
    min-width: 0 !important; /* flex 축소 지원 */
  }

  .list-view .card-name-group {
    flex-direction: row !important; /* 이름과 기수를 가로로 정렬 */
    align-items: center !important;
    gap: 0.3rem !important;
    width: 100% !important;
  }

  .list-view .card-name {
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  .list-view .card-class {
    display: none !important; /* 모바일 초슬림 목록 탐색을 위해 학과/학번 뱃지 생략 */
  }

  .list-view .card-headline {
    font-size: 0.72rem !important;
    color: var(--color-text-sub) !important;
    white-space: nowrap !important; /* 모바일 목록에서는 한 줄 강제 절단 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    max-width: 100% !important;
  }

  .list-view .card-tags {
    display: none !important; /* 모바일 초슬림 목록 탐색을 위해 태그 생략 */
  }

  .list-view .card-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important; /* 상단 경계선 제거 */
  }

  /* 모바일 리스트뷰에서는 이메일 및 소셜 링크들을 전부 숨겨 가로폭/세로폭 낭비 원천 차단 */
  .list-view .card-email-row,
  .list-view .card-contacts {
    display: none !important;
  }

  .list-view .btn-view-profile {
    padding: 0.18rem 0.45rem !important; /* 버튼 초소형화 */
    font-size: 0.65rem !important;
    border-radius: 4px !important;
  }

  /* 관리자 대시보드 태블릿/소형 */
  .admin-dashboard {
    padding: 1.25rem 1rem;
  }

  .admin-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .admin-dashboard-header h2 {
    font-size: 1.4rem;
  }

  .admin-table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }

  .admin-table-actions {
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
  }

  .admin-table-actions > * {
    width: 100% !important;
  }

  .admin-filter-select {
    width: 100% !important;
  }

  .admin-table-actions .btn {
    width: 100% !important;
    justify-content: center;
  }

  .admin-search-box input {
    width: 100%;
  }

  .admin-stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
    margin-bottom: 1rem !important;
  }

  .admin-stat-card {
    padding: 0.4rem 0.2rem !important;
    gap: 0.2rem !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .admin-stat-card .stat-icon {
    display: none !important;
  }

  .admin-stat-card .stat-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .admin-stat-card .stat-value {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  .admin-stat-card .stat-label {
    font-size: 0.62rem !important;
    white-space: nowrap !important;
    color: var(--color-text-sub) !important;
  }

  /* 모달 패딩 축소 */
  .modal-overlay {
    padding: 0.5rem;
  }

  .modal-content {
    padding: 1.25rem;
  }

  .modal-avatar {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }

  .modal-section {
    padding: 0.9rem;
  }

  /* 알림 팝오버 위치 보정 */
  .notif-popover {
    width: min(320px, calc(100vw - 1.5rem));
    right: -10px;
  }

  /* ---- 관리자 대시보드 모바일 탭 메뉴 스크롤 최적화 ---- */
  .admin-tab-menu, .admin-sub-tab-menu {
    overflow-x: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    gap: 0.5rem !important;
  }
  
  .admin-tab-menu button, .admin-sub-tab-menu button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ---- 모바일 대시보드 테이블 불필요한 정보 숨김 (가로 폭 최적화) ---- */
  /* 1) 회원 관리 테이블: 전공(4번째), 학위(5번째) 열 숨김 */
  .admin-member-table th:nth-child(4),
  .admin-member-table td:nth-child(4),
  .admin-member-table th:nth-child(5),
  .admin-member-table td:nth-child(5) {
    display: none !important;
  }

  /* 2) 건의 및 문의사항 테이블: 학번(2번째), 작성일(5번째) 열 숨김 */
  #adminInquirySection table th:nth-child(2),
  #adminInquirySection table td:nth-child(2),
  #adminInquirySection table th:nth-child(5),
  #adminInquirySection table td:nth-child(5) {
    display: none !important;
  }
  
  /* 건의 및 문의사항 테이블 가로 폭 강제 릴리즈 (고정 너비 800px 돌파 방지) */
  #adminInquirySection table {
    table-layout: auto !important;
  }

  /* ---- 모바일 대시보드 테이블 가로 스크롤 및 셀 줄바꿈 방지 ---- */
  .admin-member-table th,
  .admin-member-table td {
    white-space: nowrap !important;
  }

  /* 권한 열 뱃지와 스위치 가로 한 줄로 유지 */
  .admin-member-table td div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
  }

  .admin-role-badge,
  .admin-toggle-switch {
    flex-shrink: 0 !important;
  }

  /* 관리 버튼 그룹 줄바꿈 방지 */
  .admin-member-table td div button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ==================== 모바일 전용 (≤480px) ==================== */
@media (max-width: 480px) {

  /* ---- 네비게이션 바 극한 압축 ---- */
  .navbar {
    padding: 0.4rem 0.5rem;
    height: 46px;
  }

  .nav-logo {
    width: 24px;
    height: 24px;
  }

  .navbar-right {
    gap: 0.35rem;
  }

  .nav-tab-btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 4px;
  }

  .user-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }

  .btn-notif-bell {
    font-size: 1rem;
    padding: 0.3rem;
  }

  /* ---- 디렉토리 레이아웃 ---- */
  .directory-layout {
    padding: 0 0.5rem;
    gap: 0.75rem;
    margin: 0.75rem auto;
  }

  /* ---- 사이드바 컴팩트화 ---- */
  .user-mini-card .mini-card-banner {
    height: 32px;
  }

  .user-mini-card .mini-avatar {
    width: 42px;
    height: 42px;
    margin-top: -21px;
    font-size: 1.1rem;
  }

  .user-mini-card .mini-card-content {
    padding: 0 0.8rem 0.8rem;
  }

  .user-mini-card h3 {
    font-size: 0.88rem;
  }

  .generation-filter-panel,
  .tag-filter-panel,
  .quick-links-panel {
    padding: 0.75rem 0.9rem;
  }

  .generation-filter-panel h4,
  .tag-filter-panel h4,
  .quick-links-panel h4 {
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
  }

  .filter-tags-list {
    max-height: 120px !important;
  }

  /* ---- 콘텐츠 헤더 ---- */
  .content-header-toolbar {
    padding: 0.5rem 0.6rem;
  }

  .content-header-toolbar h3 {
    font-size: 0.88rem;
  }

  .content-sub-text {
    font-size: 0.72rem;
    color: var(--color-text-dim);
  }

  .btn-view-toggle {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  /* ---- 검색바 ---- */
  .search-bar-row {
    margin-bottom: 0;
  }

  .search-bar-row .search-box input {
    font-size: 0.82rem;
    padding: 0.5rem 0.8rem 0.5rem 2rem;
  }

  /* ---- 멤버 카드 그리드 (1열 + 컴팩트 세로 카드) ---- */
  .members-grid.grid-view {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .grid-view .member-card {
    min-height: auto;
    padding: 0;
    overflow: hidden;
    /* 텍스트 정렬은 center 유지 (아바타/이름 중앙 디자인 유지) */
  }

  .grid-view .card-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    margin: 0.75rem auto 0.35rem;
  }

  .grid-view .card-body {
    padding: 0 0.75rem 0.6rem;
  }

  .grid-view .card-name-group {
    margin-bottom: 0.1rem;
    text-align: center;
  }

  .grid-view .card-name-row {
    justify-content: center;
  }

  .grid-view .card-name {
    font-size: 0.88rem;
  }

  .grid-view .card-class {
    font-size: 0.68rem;
    text-align: center;
  }

  .grid-view .card-headline {
    font-size: 0.72rem;
    height: 1.4em;
    -webkit-line-clamp: 1;
    margin-top: 0.15rem;
    text-align: center;
  }

  .grid-view .card-tags {
    justify-content: center; /* center 유지 */
    margin-top: 0.25rem;
    gap: 0.15rem;
  }

  .grid-view .card-tag {
    font-size: 0.58rem;
    padding: 0.05rem 0.3rem;
  }

  /* 모바일에서 카드 하단 영역(이메일/SNS/프로필 버튼) 숨김 — 카드 자체 터치로 상세 진입 */
  .grid-view .card-footer {
    display: none !important;
  }

  .grid-view .card-delete-btn {
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.65rem;
  }

  /* 이메일 캡슐 모바일 (리스트뷰용) */
  .card-email-row {
    font-size: 0.68rem;
    padding: 0.2rem 0.5rem;
    margin: 0.1rem 0 0;
    justify-content: flex-start;
  }

  /* ---- 리스트뷰 모바일 추가 보정 ---- */
  .list-view .member-card {
    padding: 0.75rem;
    gap: 0.5rem;
    border-left-width: 3px;
  }

  .list-view .card-avatar {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .list-view .card-name {
    font-size: 0.82rem;
  }

  .list-view .card-headline {
    font-size: 0.72rem;
  }

  /* ---- 모달 극한 컴팩트 ---- */
  .modal-card {
    max-height: 95vh;
    border-radius: 8px;
  }

  .modal-content {
    padding: 1rem 0.75rem;
  }

  .modal-close-btn {
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .modal-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
  }

  .name-edit-row h2 {
    font-size: 1.15rem;
  }

  .modal-class {
    font-size: 0.8rem;
  }

  .modal-headline {
    font-size: 0.85rem;
    padding-left: 0.5rem;
  }

  .modal-section {
    padding: 0.75rem;
    border-radius: 8px;
  }

  .modal-section h4 {
    font-size: 0.85rem;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
  }

  .section-text {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  .modal-body-sections {
    gap: 1rem;
    padding-top: 1rem;
  }

  .modal-contact-row .btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
  }

  .btn-edit-profile {
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
  }

  /* 모달 내 방명록 폼 — inline style 충돌 방지를 위해 !important 적용 */
  .modal-guestbook-form-box {
    padding: 0.6rem !important;
  }

  /* inline style="grid-template-columns: 1fr 120px" 을 !important로 덮어씀 */
  #modalCommentForm .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }

  /* 방명록 전송 버튼 — textarea 옆에 있는 div도 세로 배치 */
  #modalCommentForm > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #modalCommentForm > div:last-child button {
    width: 100% !important;
    height: auto !important;
  }

  /* 편집 모달 */
  .edit-form .form-group label {
    font-size: 0.75rem;
  }

  .edit-form input,
  .edit-form textarea,
  .edit-form select {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  .edit-form-actions {
    flex-direction: column-reverse;
    gap: 0.4rem;
  }

  .edit-form-actions .btn {
    width: 100%;
  }

  /* SNS 링크 행 */
  .sns-link-row {
    flex-wrap: wrap;
  }

  .sns-link-row select {
    width: 100% !important;
  }

  /* ---- 방명록 피드 ---- */
  .feed-section {
    padding: 0.75rem;
  }

  .feed-header h3 {
    font-size: 0.88rem;
  }

  .feed-input-box {
    padding: 0.6rem;
  }

  .comment-card {
    padding: 0.6rem;
  }

  .comment-name {
    font-size: 0.78rem;
  }

  .comment-body {
    font-size: 0.78rem;
  }

  .comment-time {
    font-size: 0.65rem;
  }

  /* ---- 관리자 대시보드 극한 ---- */
  .admin-dashboard {
    padding: 0.75rem 0.5rem;
  }

  .admin-dashboard-header h2 {
    font-size: 1.2rem;
  }

  .admin-dashboard-subtitle {
    font-size: 0.78rem;
  }



  .admin-table-header {
    padding: 0.75rem;
  }

  .admin-table-header h3 {
    font-size: 1rem;
  }

  .admin-member-table th {
    padding: 0.6rem 0.75rem;
    font-size: 0.75rem;
  }

  .admin-member-table td {
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
  }

  /* 관리자 탭 메뉴 */
  .admin-tab-menu {
    gap: 0.3rem !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .admin-tab-menu button {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.5rem !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 관리자 서브 탭 메뉴 */
  .admin-sub-tab-menu {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem !important;
    gap: 0.3rem !important;
  }

  .admin-sub-tab-menu button {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.5rem !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 관리자 빠른링크 추가 폼 모바일 세로 배치 */
  #adminAddQuickLinkForm {
    flex-direction: column !important;
  }

  #adminAddQuickLinkForm .form-group {
    min-width: unset !important;
    width: 100% !important;
  }

  /* 엑셀 업로드 모달 */
  .excel-dropzone {
    padding: 1.5rem 1rem !important;
  }

  /* 쪽지함 DM 모달 내부 탭 영역 */
  #dmInboxModal .modal-content,
  #dmSendModal .modal-content {
    padding: 0.75rem !important;
  }

  /* ---- 알림 팝오버 (900px 미디어 쿼리 룰로 통합) ---- */

  .notif-item {
    padding: 0.6rem 0.75rem;
  }

  .notif-item-body {
    font-size: 0.72rem;
  }

  /* ---- 로그인 페이지 미세 조정 ---- */
  .login-container {
    padding: 1rem;
  }

  .login-card {
    padding: 1.75rem 1.25rem;
  }

  .brand-logo {
    width: 56px;
    height: 56px;
  }

  .brand-title {
    font-size: 1.25rem;
  }

  .brand-subtitle {
    font-size: 0.78rem;
  }

  .login-footer .hint {
    font-size: 0.65rem;
  }

  /* ---- 문의 모달 ---- */
  .inquiry-tabs {
    gap: 0.5rem !important;
  }

  .inquiry-tabs button {
    font-size: 0.78rem !important;
  }

  /* ---- 마크다운 콘텐츠 ---- */
  .markdown-content {
    font-size: 0.8rem;
  }

  .markdown-content h5 {
    font-size: 0.85rem;
  }

  /* ---- DM 쪽지함 모달 모바일 최적화 ---- */
  #dmInboxModal .modal-card,
  #dmSendModal .modal-card {
    max-height: 90vh;
  }

  /* 헤더 파트너 이름 크기 줄임 및 새로고침 여백 축소 */
  #dmChatPartnerName {
    max-width: 110px !important;
  }

  .btn-refresh-absolute {
    top: 0.5rem !important;
    right: 2.7rem !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }

  .btn-refresh-absolute .refresh-text {
    display: none !important;
  }

  /* 최근 대화 목록 및 새 쪽지 작성 탭 wrap 처리 */
  .dm-sub-tab-menu {
    flex-wrap: wrap !important;
    row-gap: 0.6rem !important;
    column-gap: 0.4rem !important;
    padding-bottom: 0.8rem !important;
  }

  .dm-sub-tab-menu .dm-write-btn {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.75rem !important;
    margin-left: auto;
  }

  /* 리스트 컨테이너 키보드 팝업 시 화면 밖 이탈 방지 */
  #dmListContainer {
    max-height: 280px !important;
    min-height: 180px !important;
    gap: 0.6rem !important;
  }

  /* 답장 입력 창 및 전송 버튼 텍스트 숨김 */
  #dmChatInputContainer {
    padding-top: 0.75rem !important;
    margin-top: 0.75rem !important;
  }

  #btnDmSendReply {
    width: 42px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  #btnDmSendReply .btn-text {
    display: none !important;
  }

  #btnDmSendReply i {
    margin: 0 !important;
  }

  /* 말풍선 너비 및 패딩 축소 */
  .dm-bubble-container {
    max-width: 90% !important;
  }

  .dm-bubble {
    padding: 0.45rem 0.65rem !important;
    font-size: 0.78rem !important;
  }

  .dm-bubble-meta {
    min-width: 35px !important;
  }

  /* 실시간 지연 안내 배너 최적화 */
  #dmInboxModal .modal-content > div[style*="background-color: var(--color-bg-base)"],
  #dmInboxModal .modal-content > div[style*="background-color:var(--color-bg-base)"] {
    padding: 0.4rem 0.6rem !important;
    margin-top: 0.6rem !important;
    align-items: flex-start !important;
  }

  #dmInboxModal .modal-content > div[style*="background-color: var(--color-bg-base)"] span,
  #dmInboxModal .modal-content > div[style*="background-color:var(--color-bg-base)"] span {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
  }

  /* ---- 쪽지 보내기 모달 최적화 ---- */
  .searchable-dropdown-list {
    max-height: 150px !important;
    z-index: 1070 !important;
  }

  .searchable-dropdown-item {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.78rem !important;
  }

  /* ---- 프로필 편집 모달 소셜 링크 폼 배치 보정 ---- */
  .sns-link-row {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  .sns-link-row select {
    width: 100% !important;
    margin-bottom: 0.1rem !important;
  }

  .sns-link-row input {
    flex: 1 !important;
  }
}

/* ==================== 개인 방명록 비공개 및 잠금 효과 스타일 ==================== */
.personal-guestbook-section {
  margin-top: 1.5rem;
}

.modal-comments-list {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.modal-comments-list::-webkit-scrollbar {
  width: 4px;
}

.modal-comments-list::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 4px;
}

/* 비공개 방명록 카드 스타일 */
.comment-card.private-message {
  background-color: #faf9f6;
  border-left: 3px solid var(--color-text-dim);
}

.comment-card.private-message.authorized {
  background-color: rgba(179, 8, 56, 0.01);
  border-left: 3px solid var(--color-sogang);
}

.comment-card.private-message .comment-body {
  color: var(--color-text-sub);
}

.comment-card.private-message.authorized .comment-body {
  color: var(--color-text-main);
}

.comment-badge-tag.private {
  background-color: #f3f2ef;
  color: var(--color-text-sub);
  border: 1px solid var(--color-border);
}

/* 비공개 텍스트 마스킹 스타일 */
.comment-card.private-message .masked-text {
  font-style: italic;
  color: var(--color-text-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ==================== 프로필 이미지 업로드 마스킹 및 핏 조절 ==================== */
.card-avatar, 
.modal-avatar, 
.mini-avatar, 
.user-avatar {
  overflow: hidden !important;
}

.card-avatar img, 
.modal-avatar img, 
.mini-avatar img, 
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==================== 관리자용 전공 관리 모달 & 학력/경력 스타일 ==================== */
#adminMajorList {
  display: flex;
  flex-direction: column;
  background-color: var(--color-card-bg);
}

#adminMajorList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}

#adminMajorList li:last-child {
  border-bottom: none;
}

#adminMajorList li .major-name {
  font-weight: 500;
  color: var(--color-text-main);
}

#adminMajorList li .btn-delete-major {
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  cursor: pointer;
  transition: var(--transition);
  padding: 0.2rem;
  font-size: 0.85rem;
}

#adminMajorList li .btn-delete-major:hover {
  color: var(--color-sogang);
}

.modal-section h4 i {
  margin-right: 0.35rem;
}

/* 편집 폼 요소를 콤팩트하게 다듬어 오버플로우 최소화 */
.edit-form .form-group {
  margin-bottom: 0.6rem;
}

.edit-form input,
.edit-form textarea,
.edit-form select {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

.edit-form-actions {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* ==================== 운영 관리 대시보드 스타일 ==================== */
.admin-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem 1.5rem;
}

.admin-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.8rem;
}

.admin-dashboard-header h2 {
  font-size: 1.35rem;
  color: var(--color-sogang);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.admin-dashboard-subtitle {
  color: var(--color-text-sub);
  font-size: 0.82rem;
  margin-top: 0.2rem;
  margin-bottom: 0;
}

.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.admin-stat-card {
  background-color: var(--color-card-bg);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--color-border);
  transition: transform var(--transition);
}

.admin-stat-card:hover {
  transform: translateY(-2px);
}

.admin-stat-card .stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
}

.admin-stat-card .stat-info {
  display: flex;
  flex-direction: column;
}

.admin-stat-card .stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-main);
  line-height: 1.2;
}

.admin-stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--color-text-sub);
  margin-top: 0.1rem;
}

.admin-table-section {
  background-color: var(--color-card-bg);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  overflow: hidden;
}

.admin-table-header {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.admin-table-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.admin-table-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.admin-search-box {
  position: relative;
}

.admin-search-box i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-dim);
  font-size: 0.8rem;
}

.admin-search-box input {
  padding: 0.4rem 0.8rem 0.4rem 2rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-input);
  color: var(--color-text-main);
  border-radius: 6px;
  font-size: 0.8rem;
  width: min(220px, 100%); /* 좁은 화면에서 100% 이하로 제한 */
  transition: var(--transition);
}

.admin-search-box input:focus {
  border-color: var(--color-sogang);
  outline: none;
  box-shadow: 0 0 0 3px rgba(179,8,56,0.1);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-member-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
  table-layout: auto;
}

.admin-member-table th {
  background-color: var(--color-bg-input);
  color: var(--color-text-sub);
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-bottom: 2px solid var(--color-border);
  font-size: 0.82rem;
  white-space: nowrap;
}

.admin-member-table td {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-main);
  vertical-align: middle;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* 데스크톱 권한 셀 및 관리 버튼 찌러짐 방지 */
.admin-member-table td div {
  flex-wrap: nowrap;
}

.admin-member-table td div button {
  flex-shrink: 0;
  white-space: nowrap;
}

.admin-member-table tbody tr:hover {
  background-color: var(--color-bg-input);
}

.admin-member-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.45rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-filter-select {
  padding: 0.4rem 0.6rem !important;
  font-size: 0.8rem !important;
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-bg-input) !important;
  color: var(--color-text-main) !important;
}

.admin-role-badge.super-admin {
  background-color: rgba(179, 8, 56, 0.1);
  color: var(--color-sogang);
}

.admin-role-badge.admin {
  background-color: rgba(197, 160, 89, 0.15);
  color: #a8853d;
}

.admin-role-badge.member {
  background-color: #f3f2ef;
  color: var(--color-text-sub);
}

.admin-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  flex-shrink: 0;
}

.admin-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.admin-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 22px;
}

.admin-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.admin-toggle-switch input:checked + .admin-toggle-slider {
  background-color: var(--color-sogang);
}

.admin-toggle-switch input:checked + .admin-toggle-slider:before {
  transform: translateX(22px);
}

.admin-toggle-switch input:disabled + .admin-toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-tab-btn {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.nav-tab-btn.active {
  background-color: var(--color-sogang-gold);
  color: var(--color-text-main) !important;
  border-color: var(--color-sogang-gold);
}

/* ==================== 엑셀 일괄 업로드 및 필터 스타일 ==================== */
.excel-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background-color: #faf9f6;
  margin-bottom: 1.5rem;
}

.excel-dropzone:hover, .excel-dropzone.dragover {
  border-color: #107c41;
  background-color: rgba(16, 124, 65, 0.03);
}

.conflict-row {
  background-color: #fff5f5 !important;
  border-left: 4px solid var(--color-sogang) !important;
}

.conflict-row:hover {
  background-color: #ffebeb !important;
}

.conflict-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  background-color: rgba(179, 8, 56, 0.1);
  color: var(--color-sogang);
}

.success-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  background-color: rgba(16, 124, 65, 0.1);
  color: #107c41;
}

.conflict-options {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.75rem;
}

.conflict-options label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  font-weight: 600;
}

.conflict-options input[type="radio"] {
  cursor: pointer;
  accent-color: var(--color-sogang);
  margin: 0;
}

.admin-filter-select {
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-card-bg);
  cursor: pointer;
  transition: var(--transition);
}

.admin-filter-select:focus {
  border-color: var(--color-sogang);
  outline: none;
}

/* ==================== 동적 소셜 링크 입력 폼 및 소셜 브랜드 컬러 ==================== */
.sns-link-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.sns-link-row select {
  width: 130px !important;
  flex-shrink: 0;
}

.sns-link-row input {
  flex: 1;
}

.btn-delete-sns {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  padding: 0.62rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
}

.btn-delete-sns:hover {
  color: var(--color-sogang);
  border-color: rgba(179,8,56,0.3);
  background-color: rgba(179,8,56,0.02);
}

/* 소셜 채널 시그니처 브랜드 컬러 */
.contact-icon.email-color { color: #b60005 !important; }
.contact-icon.github-color { color: #1a202c !important; }
.contact-icon.blog-color { color: #f26522 !important; }
.contact-icon.linkedin-color { color: #0077b5 !important; }
.contact-icon.website-color { color: #2a9d8f !important; }
.contact-icon.notion-color { color: #000000 !important; }
.contact-icon.youtube-color { color: #ff0000 !important; }
.contact-icon.other-color { color: #718096 !important; }

/* 상세 모달 내 링크 단추 호버 및 색상 */
.btn-sns-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-sns-link.email-color:hover { background-color: rgba(182, 0, 5, 0.05); }
.btn-sns-link.github-color:hover { background-color: rgba(26, 32, 44, 0.05); }
.btn-sns-link.blog-color:hover { background-color: rgba(242, 101, 34, 0.05); }
.btn-sns-link.linkedin-color:hover { background-color: rgba(0, 119, 181, 0.05); }
.btn-sns-link.website-color:hover { background-color: rgba(42, 157, 143, 0.05); }
.btn-sns-link.notion-color:hover { background-color: rgba(0, 0, 0, 0.05); }
.btn-sns-link.youtube-color:hover { background-color: rgba(255, 0, 0, 0.05); }
.btn-sns-link.other-color:hover { background-color: rgba(113, 128, 150, 0.05); }

/* 기수 뱃지 및 이름 정렬 레이아웃 */
.card-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.grid-view .card-name-row {
  justify-content: center;
}

.list-view .card-name-row {
  justify-content: flex-start;
  flex-wrap: nowrap !important;
}

.gen-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.08rem 0.4rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ==================== 기수별 동적 테마 (Dynamic Generation Cohort Themes) ==================== */
.member-card {
  --cohort-color: #4a4a4a;
}

/* 기수 알약 뱃지 (기수별 고유 색상 적용, 카드 본체 색상은 통일감 있게 유지) */
.gen-badge {
  background-color: var(--cohort-color) !important;
  color: #ffffff !important;
}

/* ==================== 이메일 주소 캡슐형 디자인 (Pill Style) ==================== */
.card-email-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 0.25rem 0.75rem;
  margin: 0.2rem auto 0;
  width: fit-content;
  max-width: 95%;
  font-size: 0.75rem;
  color: var(--color-text-sub);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: var(--transition);
}

.card-email-row:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.card-email-row .email-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
  font-weight: 500;
  color: var(--color-text-sub);
}

.card-email-row .copy-email-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--color-sogang);
  padding: 0.1rem;
  display: inline-flex;
  align-items: center;
  transition: var(--transition);
}

.card-email-row .copy-email-btn:hover {
  color: var(--color-sogang-hover);
  transform: scale(1.1);
}

/* 모달 상세창 이메일 컨테이너 */
.modal-email-row {
  display: flex;
  width: 100%;
  margin-top: 0.5rem;
}

/* ==================== 마크다운 파서 스타일 ==================== */
.markdown-content {
  line-height: 1.7;
  font-size: 0.85rem;
  color: var(--color-text-main);
}

.markdown-content h5 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.markdown-content h5::before {
  content: "•";
  color: var(--color-sogang-gold);
  font-weight: bold;
}

.markdown-content p {
  margin-bottom: 0.6rem;
}

.markdown-content ul {
  padding-left: 1.2rem;
  margin-bottom: 0.8rem;
  list-style-type: disc;
}

.markdown-content li {
  margin-bottom: 0.3rem;
  line-height: 1.6;
}

.markdown-content blockquote {
  border-left: 4px solid var(--color-sogang-gold);
  background-color: #faf9f6;
  padding: 0.6rem 1rem;
  margin: 0.8rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--color-text-sub);
}

.markdown-content strong {
  font-weight: 700;
  color: var(--color-text-main);
}

/* ==================== 알림(Notification) 컴포넌트 스타일 ==================== */
.notification-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
}

.btn-notif-bell {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.2rem;
  padding: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: var(--transition);
}

.btn-notif-bell:hover {
  color: var(--color-sogang-gold);
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #ff1744; /* 선명한 빨간색 알림 동그라미 */
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  height: 15px;
  min-width: 15px;
  border-radius: 10px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-sogang); /* 상단바 배경(스칼렛)과 겹칠 때 구분을 위한 테두리 */
}

/* 알림 팝오버 드롭다운 */
.notif-popover {
  position: absolute;
  top: 45px;
  right: -50px;
  width: min(320px, calc(100vw - 1rem)); /* 뷰포트 너비를 초과하지 않도록 제한 */
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-slide-up 0.2s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.notif-popover-header {
  padding: 0.75rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-main);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-bg-input);
}

.btn-mark-all-read {
  background: transparent;
  border: none;
  color: var(--color-sogang);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: var(--transition);
}

.btn-mark-all-read:hover {
  background-color: var(--color-sogang-glow);
}

.notif-list {
  max-height: 280px;
  overflow-y: auto;
}

.notif-item {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: var(--transition);
}

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

.notif-item:hover {
  background-color: var(--color-bg-input);
}

/* 읽지 않은 최신 알림은 옅은 붉은기 도는 실버 백그라운드로 포인트 */
.notif-item.unread {
  background-color: rgba(182, 0, 5, 0.03);
}

.notif-item.unread:hover {
  background-color: rgba(182, 0, 5, 0.05);
}

.notif-item-body {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text-main);
  text-align: left;
}

.notif-item-body strong {
  color: var(--color-text-main);
  font-weight: 700;
}

.notif-item-time {
  font-size: 0.68rem;
  color: var(--color-text-dim);
  font-family: var(--font-display);
  text-align: left;
}

.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-dim);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.notif-empty i {
  font-size: 1.5rem;
}

/* ==================== 문의사항 및 비밀번호 변경 스타일 ==================== */
.inquiry-tabs button {
  transition: all 0.2s ease;
}
.inquiry-tabs button:hover {
  color: var(--color-sogang) !important;
}

.my-inquiry-card {
  background-color: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  font-size: 0.82rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.my-inquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #edf2f7;
  padding-bottom: 0.3rem;
  margin-bottom: 0.2rem;
}

.inquiry-status-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
}
.inquiry-status-badge.pending {
  background-color: #feebc8;
  color: #c05621;
}
.inquiry-status-badge.resolved {
  background-color: #c6f6d5;
  color: #22543d;
}
.inquiry-status-badge.deleted {
  background-color: #fed7d7;
  color: #9b2c2c;
}

.inquiry-reply-box {
  background-color: #ebf8ff;
  border-left: 3px solid #3182ce;
  padding: 0.5rem;
  border-radius: 0 4px 4px 0;
  margin-top: 0.3rem;
}

.admin-tab-menu button {
  transition: all 0.2s ease;
}
.admin-tab-menu button:hover {
  color: var(--color-sogang) !important;
}
.admin-tab-menu button.active-tab {
  border-bottom: 3px solid var(--color-sogang) !important;
  color: var(--color-sogang) !important;
  font-weight: 700 !important;
}

/* ==================== 메인 영역 검색 바 스타일 ==================== */
.search-bar-row {
  margin-bottom: 0;
  width: 100%;
}

.search-bar-row .search-box {
  width: 100%;
  position: relative;
}

.search-bar-row .search-box i {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-dim);
  font-size: 0.9rem;
}

.search-bar-row .search-box input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  padding: 0.65rem 1rem 0.65rem 2.4rem;
  border-radius: var(--radius-md);
  width: 100%;
  color: var(--color-text-main);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.search-bar-row .search-box input::placeholder {
  color: var(--color-text-dim);
}

.search-bar-row .search-box input:focus {
  outline: none;
  border-color: var(--color-sogang);
  box-shadow: 0 0 0 3px rgba(182, 0, 5, 0.12);
}

/* ==================== 멤버 상세 필터 프리미엄 스타일 ==================== */
.filter-select-group {
  margin-bottom: 0.75rem;
}
.filter-select-group:last-child {
  margin-bottom: 0;
}
.filter-select-group label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-text-sub);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.filter-select-group select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-input);
  color: var(--color-text-main);
  font-family: var(--font-body);
  cursor: pointer;
  transition: var(--transition);
}
.filter-select-group select:focus {
  border-color: var(--color-sogang);
  outline: none;
  box-shadow: 0 0 0 2px rgba(179, 8, 56, 0.1);
}

/* ==================== 빠른 바로가기 (Quick Links) 스타일 ==================== */
.quick-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.quick-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-main);
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.quick-link-chip:hover {
  background-color: rgba(182, 0, 5, 0.05);
  border-color: var(--color-sogang);
  color: var(--color-sogang);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.quick-link-chip i {
  font-size: 0.8rem;
  color: var(--color-sogang-gold);
}

.quick-link-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.8rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-dim);
  background-color: var(--color-bg-input);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.quick-link-empty i {
  font-size: 0.8rem;
  color: var(--color-text-dim);
}

/* ==================== 쪽지함 (DM) 스타일 ==================== */
.dm-card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  transition: var(--transition);
}

.dm-card:hover {
  border-color: var(--color-sogang-gold);
  box-shadow: var(--shadow-sm);
}

.dm-card.unread {
  border-left: 4px solid var(--color-sogang);
  background-color: rgba(182, 0, 5, 0.01);
}

.dm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.dm-sender-info {
  font-weight: 700;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dm-unread-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-sogang);
  display: inline-block;
}

.dm-time {
  font-size: 0.72rem;
  color: var(--color-text-dim);
}

.dm-message-body {
  font-size: 0.82rem;
  color: var(--color-text-sub);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
}

.dm-empty-state {
  text-align: center;
  color: var(--color-text-dim);
  padding: 3rem 1.5rem;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.dm-empty-state i {
  font-size: 2.2rem;
  color: var(--color-border);
}/* ==================== 드롭다운 검색 필터 스타일 ==================== */
.searchable-dropdown-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin-top: 0.25rem;
}

.searchable-dropdown-item {
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: var(--color-text-main);
  cursor: pointer;
  transition: background-color 0.15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.searchable-dropdown-item:hover {
  background-color: var(--color-bg-base);
  color: var(--color-sogang);
}

.searchable-dropdown-item.selected {
  background-color: var(--color-sogang-glow);
  color: var(--color-sogang);
  font-weight: 700;
}

.searchable-dropdown-item .item-sub {
  font-size: 0.72rem;
  color: var(--color-text-dim);
}

/* ==================== 1:1 대화형 쪽지함 (스레드) 스타일 ==================== */

/* 스레드 목록 항목 */
.dm-thread-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-card);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.dm-thread-item:hover {
  transform: translateY(-1px);
  border-color: var(--color-sogang-glow);
  box-shadow: 0 4px 12px rgba(179, 8, 56, 0.06);
  background-color: var(--color-bg-base);
}

.dm-thread-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-sub);
  font-size: 1.15rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.dm-thread-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dm-thread-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.dm-thread-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-thread-time {
  font-size: 0.7rem;
  color: var(--color-text-dim);
  flex-shrink: 0;
}

.dm-thread-body {
  font-size: 0.78rem;
  color: var(--color-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-thread-unread-badge {
  background-color: var(--color-sogang);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 12px;
  padding: 0.15rem 0.45rem;
  min-width: 18px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}

/* 대화방 말풍선 */
.dm-chat-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.2rem;
  width: 100%;
}

.dm-chat-row.sent {
  align-items: flex-end;
}

.dm-chat-row.received {
  align-items: flex-start;
}

.dm-bubble-container {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: 82%;
}

.dm-chat-row.sent .dm-bubble-container {
  flex-direction: row-reverse;
}

.dm-bubble {
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  border-radius: 12px;
  word-break: break-word;
  white-space: pre-wrap;
}

.dm-chat-row.sent .dm-bubble {
  background-color: var(--color-sogang);
  color: #ffffff;
  border-top-right-radius: 2px;
  box-shadow: 0 1px 2px rgba(179, 8, 56, 0.15);
}

.dm-chat-row.received .dm-bubble {
  background-color: var(--color-bg-card);
  color: var(--color-text);
  border-top-left-radius: 2px;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dm-bubble-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.65rem;
  color: var(--color-text-dim);
  min-width: 45px;
  flex-shrink: 0;
  user-select: none;
}

.dm-chat-row.received .dm-bubble-meta {
  align-items: flex-start;
}

.dm-unread-indicator {
  color: #f57c00;
  font-weight: 700;
  margin-bottom: 0.05rem;
  font-size: 0.65rem;
}

.dm-bubble-time {
  white-space: nowrap;
}

/* 말풍선 관리 액션 (삭제 등) */
.dm-bubble-actions-row {
  margin-top: 0.1rem;
  font-size: 0.65rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  gap: 0.3rem;
}

.dm-chat-row:hover .dm-bubble-actions-row {
  opacity: 1;
}

.dm-bubble-action-btn {
  background: none;
  border: none;
  padding: 0.1rem 0.3rem;
  color: var(--color-text-dim);
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dm-bubble-action-btn:hover {
  color: var(--color-sogang);
  background-color: var(--color-bg-base);
}

/* 대화 리스트 엠티 상태 */
.dm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  color: var(--color-text-dim);
  gap: 0.8rem;
  text-align: center;
}

.dm-empty-state i {
  font-size: 2.2rem;
  color: var(--color-border);
}

.dm-empty-state span {
  font-size: 0.85rem;
}

/* 삭제된 메시지 흔적(Tombstone) 스타일 */
.dm-bubble.deleted {
  font-style: italic;
  opacity: 0.55;
  user-select: none;
}

.dm-chat-row.sent .dm-bubble.deleted {
  background-color: var(--color-bg-base) !important;
  color: var(--color-text-dim) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: none !important;
}

.dm-chat-row.received .dm-bubble.deleted {
  background-color: var(--color-bg-base) !important;
  color: var(--color-text-dim) !important;
  box-shadow: none !important;
}

/* ==================== 터치 기기용 DM 말풍선 삭제 버튼 노출 대응 ==================== */
@media (hover: none) {
  .dm-bubble-actions-row {
    opacity: 0.75 !important;
  }
}

/* 새로고침 절대 위치 스타일 (쪽지함 모달용) */
.btn-refresh-absolute {
  position: absolute;
  top: 1rem;
  right: 3.8rem;
  height: 32px;
  padding: 0 0.8rem;
  border-radius: 16px;
  background-color: var(--color-bg-input);
  color: var(--color-text-main);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  z-index: 1061;
}

.btn-refresh-absolute:hover {
  background-color: var(--color-sogang-glow);
  color: var(--color-sogang);
}

.btn-refresh-absolute i {
  font-size: 0.8rem;
}

/* ==================== 다크모드 추가 컴포넌트 & 오버라이드 스타일 ==================== */

/* 테마 전환 버튼 */
.btn-theme-toggle {
  background-color: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-text-main);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0.45rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  width: 36px;
  height: 36px;
}

.btn-theme-toggle:hover {
  background-color: var(--color-border);
  color: var(--color-text-main);
  transform: rotate(15deg);
}

/* 엑셀 경고 배너 */
.excel-warning-banner {
  background-color: #fff9e6;
  border: 1px solid #ffeeba;
  color: #856404;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.excel-warning-banner span {
  color: #856404;
}

/* 다크모드 튜닝 오버라이드 */
html[data-theme="dark"] .excel-warning-banner {
  background-color: rgba(212, 178, 112, 0.1);
  border-color: rgba(212, 178, 112, 0.2);
}

html[data-theme="dark"] .excel-warning-banner span,
html[data-theme="dark"] .excel-warning-banner {
  color: var(--color-sogang-gold);
}

html[data-theme="dark"] .login-card {
  background: rgba(24, 24, 28, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 5px 15px rgba(182, 0, 5, 0.2);
}

html[data-theme="dark"] .login-footer .hint {
  background-color: var(--color-bg-input);
  border: 1px dashed var(--color-border);
}

html[data-theme="dark"] .alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* 테마 토글 버튼 다크모드 대응 */
html[data-theme="dark"] .btn-theme-toggle {
  color: var(--color-sogang-gold);
  background-color: var(--color-bg-input);
  border-color: var(--color-border);
}

html[data-theme="dark"] .btn-theme-toggle:hover {
  background-color: var(--color-border);
  color: #ffffff;
}

/* 모바일 네비게이션 및 사이드바 다크모드 어둡게 처리 */
html[data-theme="dark"] .navbar {
  background: linear-gradient(135deg, var(--color-sogang) 0%, #5c0002 100%);
  border-bottom: 2px solid var(--color-sogang-gold);
}

html[data-theme="dark"] .admin-console-panel {
  background-color: rgba(224, 44, 50, 0.04);
  border: 1px solid var(--color-sogang);
}

html[data-theme="dark"] .btn-tag:hover {
  background-color: var(--color-border);
  color: var(--color-text-main);
}

html[data-theme="dark"] .admin-role-badge.admin {
  color: var(--color-sogang-gold);
  background-color: rgba(197, 160, 89, 0.1);
}

html[data-theme="dark"] .conflict-row {
  background-color: rgba(224, 44, 50, 0.08) !important;
  border-left: 4px solid var(--color-sogang) !important;
}

html[data-theme="dark"] .conflict-row:hover {
  background-color: rgba(224, 44, 50, 0.12) !important;
}

/* 프리미엄 테마 토글 스위치 스타일 */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
  cursor: pointer;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-input);
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  border: 1px solid var(--color-border);
}

.theme-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.theme-slider i {
  font-size: 0.72rem;
  z-index: 1;
  transition: 0.4s;
}

.theme-slider .icon-sun {
  color: #f59e0b;
  opacity: 1;
}

.theme-slider .icon-moon {
  color: #a1a1aa;
  opacity: 0.5;
}

/* 다크모드일 때 스위치 상태 변경 */
.theme-switch input:checked + .theme-slider {
  background-color: #202024;
  border-color: #2d2d34;
}

.theme-switch input:checked + .theme-slider:before {
  transform: translateX(26px);
  background-color: #18181c;
  box-shadow: inset -3px -2px 0px 0px #e2be7a; /* 골드 크레센트 달 효과 */
}

.theme-switch input:checked + .theme-slider .icon-sun {
  opacity: 0.3;
  color: #71717a;
}

.theme-switch input:checked + .theme-slider .icon-moon {
  opacity: 1;
  color: #e2be7a;
}

/* 방명록 코멘트 배지 태그 다크모드 대응 */
html[data-theme="dark"] .comment-badge-tag.cheer { background-color: rgba(239, 68, 68, 0.15); color: #f87171; }
html[data-theme="dark"] .comment-badge-tag.question { background-color: rgba(59, 130, 246, 0.15); color: #60a5fa; }
html[data-theme="dark"] .comment-badge-tag.coffee { background-color: rgba(245, 158, 11, 0.15); color: #fbbf24; }
html[data-theme="dark"] .comment-badge-tag.feedback { background-color: rgba(16, 185, 129, 0.15); color: #34d399; }

/* 사이드바 소형 키워드 검색창 스타일 및 다크모드 대응 */
#tagSearchInput {
  background-color: var(--color-bg-input);
  color: var(--color-text-main);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

#tagSearchInput:focus {
  outline: none;
  background-color: var(--color-card-bg);
  border-color: var(--color-sogang);
  box-shadow: 0 0 0 3px var(--color-sogang-glow);
}

/* 개인 방명록 폼 내 입력 필드 다크모드 대응 */
#modalCommentAuthor,
#modalCommentMessage {
  background-color: var(--color-bg-input);
  color: var(--color-text-main);
  border: 1px solid var(--color-border);
  transition: var(--transition);
}

#modalCommentAuthor:focus,
#modalCommentMessage:focus {
  outline: none;
  background-color: var(--color-card-bg);
  border-color: var(--color-sogang);
  box-shadow: 0 0 0 3px var(--color-sogang-glow);
}

/* 쪽지함 서브 탭 메뉴 및 새 쪽지 작성 버튼 스타일 */
.dm-sub-tab-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1rem;
  padding: 0.2rem 0 0.8rem 0; /* 상단 0.2rem, 하단 0.8rem으로 수직 균형 및 아래 보더와의 거리를 확보 */
  flex-shrink: 0;
}

.dm-sub-tab-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-sub);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.dm-sub-tab-title i {
  color: var(--color-sogang);
}

.dm-write-btn {
  border-radius: 6px;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-left: auto;
  line-height: 1;
  transition: var(--transition);
}

.dm-write-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(182, 0, 5, 0.2);
}

.dm-write-btn:active {
  transform: translateY(0);
}

/* ==================== 쿠팡 광고 그리드 반응형 보정 ==================== */
@media (max-width: 1100px) and (min-width: 901px) {
  .members-grid.grid-view {
    grid-template-columns: repeat(2, 1fr) !important; /* 데스크톱 좁은 화면 -> 2열 */
  }
}

@media (max-width: 750px) {
  .members-grid.grid-view {
    grid-template-columns: repeat(2, 1fr) !important; /* 모바일 중간 화면 -> 2열 */
  }
}

@media (max-width: 500px) {
  .members-grid.grid-view {
    grid-template-columns: 1fr !important; /* 모바일 세로 좁은 화면 -> 1열 */
  }
}