@charset "UTF-8";

/**
 * --------------------------------------------------------------------------
 * Layout Structure
 * --------------------------------------------------------------------------
 * @description Header, Sidebar, Content Wrapper.
 */

#app-wrap {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: relative;
}

#container {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* [Header] */
#header {
  height: var(--header-height);
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 16px;
  z-index: var(--z-header);
  flex-shrink: 0;
  position: relative;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 인라인 스타일 제거 및 gap을 이용한 간격 표준화 */
.logo-link {
  display: flex;
  align-items: center;
  gap: 3px; /* 로고 이미지와 텍스트 사이의 간격 */
  text-decoration: none;
}

/* 로고 이미지 크기 제어 */
.logo-img {
  height: 25px;
  width: auto;
  object-fit: contain;
}

/* 텍스트 영역 */
.logo {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: 25px; /* 부모(.logo-link)의 폰트 크기 상속 */
  letter-spacing: -0.5px;
}


/* 로고 텍스트 색상 (공통 변수 사용, 없으면 폴백 색상 적용) */
.logo-eco { color: var(--text-primary, #C0C0C0) !important; }

.logo-container {
  display: flex;
  align-items: center;
  gap: 8px; /* 로고와 뱃지 사이 간격 */
}

/* 서브 텍스트 (Frame) 뱃지 스타일 */
.badge-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 4px 8px 2px;

  /* 뱃지 디자인 (로그인 화면과 유사한 스타일 적용) */
  background-color: rgba(var(--primary-rgb, 49, 130, 246), 0.08);
  color: var(--primary-color, #3182f6);
  border: 1px solid rgba(var(--primary-rgb, 49, 130, 246), 0.2);
  border-radius: 6px;

  /* 폰트 설정 */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
}


/* 햄버거 버튼 애니메이션 스타일 */
.btn-hamburger {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.btn-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--text-secondary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

/* 활성화 상태 (X 모양) */
.btn-hamburger.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.btn-hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.btn-hamburger.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* PC 모드 사이드바 접힘 상태일 때 햄버거 버튼 미세 조정 (가운데 줄 축소) */
#app-wrap.collapsed .btn-hamburger span:nth-child(2) {
  width: 12px; /* 원래 20px에서 12px로 축소 */
}

/* Header Buttons */
.btn-hamburger, #theme-toggle-btn, #btn-logout {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: 0.2s;
  border: none;
  background: transparent;
}

.btn-hamburger:hover, #theme-toggle-btn:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

#btn-logout:hover {
  background-color: rgba(229, 78, 94, 0.1);
  color: var(--danger-color);
}

/* Header 내부의 Theme Toggle 버튼은 Static 위치를 가짐 */
#header #theme-toggle-btn {
  position: static; /* common.css의 fixed 무시 */
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  background-color: transparent;
}

#header #theme-toggle-btn:hover {
  /*     background-color: var(--hover-bg); */
  color: var(--text-primary);
}


/* User Profile */
.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.user-profile:hover {
  background-color: var(--hover-bg);
}

/* 권한 뱃지 스타일  */
.user-role-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
  background-color: #e5e8eb; /* 기존보다 한 단계 진한 회색 */
  color: #333d4b; /* 텍스트도 살짝 더 진하게 */
  letter-spacing: -0.3px;
  line-height: 1.2;
}

/* 사용자 이름 스타일 (필요시 적용) */
.user-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.user-avatar {
  width: 32px;
  height: 32px;
  background-color: #e1e4e8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* [Sidebar] */
#sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s;
  flex-shrink: 0;
  z-index: var(--z-sidebar);
  white-space: nowrap;
}

.sidebar-content {
  flex: 1;
  padding: 20px 16px;
  overflow-y: auto;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  gap: 8px;
}

.tool-btn {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: var(--bg-header);
  border: 1px solid var(--border-color);
  width: 100%;
  justify-content: center;
}

.tool-btn:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

/* ==========================================================================
   Navigation (Sidebar Menu - Toss Style Floating Pill)
   ========================================================================== */

.nav-group {
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   [1-Depth] 대메뉴 (가장 크고 강조됨)
   -------------------------------------------------------------------------- */
.nav-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 8px 4px 8px; /* 좌우 여백을 주어 둥근 캡슐 느낌 부여 */
  padding: 0 14px 0 15px;
  height:46px;
  color: var(--text-secondary);
  font-size: 15px; /* 폰트 크기 확대 */
  font-weight: 600;
  border-radius: 10px; /* 둥근 모서리 */
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-category:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

/* 1-Depth 활성화 상태 */
.nav-category.active-parent {
  color: var(--primary-color);
  background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
  font-weight: 700;
}

.nav-category.active-parent .category-icon .icon {
  background-color: var(--primary-color);
}

.nav-category.open .category-arrow {
  transform: rotate(180deg);
}

.category-left {
  display: flex;
  align-items: center;
  gap: 12px; /* 아이콘과 텍스트 간격 확대 */
}

.category-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   [2-Depth] 중메뉴 컨테이너 및 아이템
   -------------------------------------------------------------------------- */
.nav-items {
  /* 기존 padding-left: 44px 제거 -> 개별 아이템에 padding을 주어 hover 영역 확장 */
  padding-left: 0;
  display: none;
}

/* 2-Depth 그룹 타이틀 (하위 메뉴가 있는 경우) */
.nav-sub-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 8px;
  padding: 10px 14px 10px 46px; /* 1-Depth 아이콘 너비만큼 들여쓰기 */
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-sub-category:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

.nav-sub-category.active-sub-parent {
  color: var(--primary-color);
  font-weight: 700;
}

.sub-category-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
  color: var(--text-tertiary);
  opacity: 0.7;
}

.nav-sub-category.open .sub-category-arrow {
  transform: rotate(180deg);
}

/* 2-Depth 일반 메뉴 (하위 메뉴가 없는 경우) */
.nav-items > .nav-item {
  display: block;
  margin: 2px 8px;
  padding: 10px 14px 10px 46px; /* 들여쓰기 */
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  text-decoration: none;
  position: relative; /* 추가: 가상 요소(세로줄) 기준점 */
  transition: background-color 0.2s, color 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* 변경: transform 추가 */
}

/* [Hover] 마우스 오버 시 우측으로 살짝 이동 */
.nav-items > .nav-item:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
  transform: translateX(4px); /* 추가 */
}

/* [Active] 활성화 상태 */
.nav-items > .nav-item.active {
  color: var(--primary-color);
  background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
  font-weight: 700;
  transform: translateX(4px); /* 추가: 활성 상태 위치 유지 */
}

/* [Indicator] 활성화 시 좌측 세로줄(Bar) 표시 */
.nav-items > .nav-item.active::before {
  content: '';
  position: absolute;
  left: 36px; /* 텍스트 시작점(46px)보다 10px 좌측 */
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background-color: var(--primary-color);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   [3-Depth] 소메뉴 (가장 작고 인터랙티브함)
   -------------------------------------------------------------------------- */
.nav-sub-group {
  margin: 2px 0;
}

.nav-sub-items {
  width: 100%;
  display: block; /* 블록 컨텍스트 강제 형성 (겹침 방지) */
}

.nav-sub-items .nav-item {
  display: flex;
  align-items: center;
  margin: 2px 8px;
  padding: 8px 14px 8px 55px; /* 2-Depth보다 더 깊은 들여쓰기 */
  font-size: 13px; /* 폰트 크기 축소로 위계 표현 */
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  position: relative;
  text-decoration: none;
  /* 높이 충돌 방지를 위해 transform과 color만 transition 적용 */
  transition: background-color 0.2s, color 0.2s;
}

/* [Indicator - Base] 기본 상태의 작은 점(Dot) */
.nav-sub-items .nav-item::before {
  content: '';
  position: absolute;
  left: 44px; /* 텍스트 시작점(56px)보다 좌측 */
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: var(--text-tertiary);
  border-radius: 50%;
  transition: all 0.2s ease;
}

/* [Hover] 마우스 오버  */
.nav-sub-items .nav-item:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}
.nav-sub-items .nav-item:hover::before {
  background-color: var(--text-secondary); /* 점 색상 진하게 */
}

/* [Active] 활성화 상태 */
.nav-sub-items .nav-item.active {
  color: var(--primary-color);
  background-color: rgba(49, 130, 246, 0.08);
  font-weight: 700;
}

/* [Indicator - Active] 활성화 시 점이 짧은 가로선(Dash)으로 확장 */
.nav-sub-items .nav-item.active::before {
  width: 8px; /* 가로로 길어짐 */
  border-radius: 4px;
  background-color: var(--primary-color);
}

/* 다크모드 보정 */
[data-theme="dark"] .nav-category.active-parent,
[data-theme="dark"] .nav-items > .nav-item.active,
[data-theme="dark"] .nav-sub-items .nav-item.active {
  background-color: rgba(49, 130, 246, 0.15);
}

/* 사이드바 접힘 모드 시 중메뉴 숨김 */
#app-wrap.collapsed .nav-sub-group {
  display: none;
}


/* [Content] */
#content {
  flex: 1;
  background-color: var(--bg-content);
  overflow-y: auto;
  padding: 40px 48px;
}

.sdi-layout #content {
  padding: 40px 48px; /* 기존 SDI의 넉넉한 여백 복구 */
}

/* ==========================================================================
   Scroll Progress Bar (Overlay Type)
   ========================================================================== */
.progress-container {
  position: absolute; /* #tabs 기준으로 절대 위치 지정 */
  top: 48px; /* PC 탭(#mdi-tab-wrapper)의 실제 높이값 */
  left: 0;
  width: 100%;
  height: 2px; /* 얇고 세련되게 유지 */
  background-color: transparent; /* 배경은 투명하게 */
  z-index: 50; /* 컨텐츠보다 위에 노출 */
}

.progress-bar {
  height: 100%;
  background: linear-gradient(to right, color-mix(in srgb, var(--primary-color) 40%, white), var(--primary-color));
  width: 0;
  transition: width 0.1s ease-out; /* 뚝뚝 끊기지 않고 부드럽게 차오름 */
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary-color) 60%, transparent); /* 살짝 빛나는 효과 */
}

@media (max-width: 768px) {
  .progress-container {
    top: 0;
  }
}


/* 헤더 내 레이아웃 모드 전환 버튼 (SDI/MDI Switch) */
.btn-mode-switch {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  margin-right: 10px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-mode-switch:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

/* 다크모드 대응 */
[data-theme="dark"] .btn-mode-switch {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

[data-theme="dark"] .btn-mode-switch:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}


/* [Responsive] */
@media (min-width: 769px) {
  #app-wrap.collapsed #sidebar {
    width: var(--sidebar-collapsed);
  }

  #app-wrap.collapsed .category-text, #app-wrap.collapsed .category-arrow,
  #app-wrap.collapsed .nav-items, #app-wrap.collapsed .sidebar-footer {
    display: none !important;
  }

  #app-wrap.collapsed .nav-category {
    justify-content: center;
    padding: 0;
    margin: 0 8px 4px 8px;
  }

  #app-wrap.collapsed .category-left {
    gap: 0;
  }

  #app-wrap.collapsed .nav-category.active-parent::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 12px;
    width: 6px;
    height: 6px;
    background-color: var(--primary-color);
    border-radius: 50%;
    border: 2px solid var(--bg-sidebar);
  }
}

@media (max-width: 768px) {
  #content {
    padding: 24px 20px !important;
  }

  #sidebar {
    position: fixed !important;
    top: var(--header-height) !important; /* 헤더 바로 아래 */
    left: calc(var(--sidebar-width) * -1); /* -250px (정확히 너비만큼 숨김) */
    width: var(--sidebar-width) !important; /* 250px 강제 고정 */
    height: calc(100% - var(--header-height)) !important;
    box-shadow: 10px 0 20px rgba(0, 0, 0, 0.05);
    z-index: var(--z-sidebar);
    transition: left 0.3s ease;
  }

  #app-wrap.mobile-open #sidebar {
    left: 0 !important;
  }

  #mobile-overlay {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: var(--z-overlay);
    backdrop-filter: blur(2px);
  }

  /* 첫 번째 메뉴(대시보드)가 잘 보이도록 내부 패딩 조정 */
  .sidebar-content {
    padding: 20px 16px !important; /* PC와 동일하게 강제 고정 */
  }

  /* 텍스트 숨기기 로직은 아래 header.html 수정과 병행 */
  .btn-mode-switch .mode-text {
    display: none; /* 모바일에서 "MODE" 글자 숨김 */
  }

  /* 1. 불필요한 텍스트 및 버튼 제거 */
  .mobile-hide {
    display: none !important;
  }

  /* 2. 헤더 좌우 패딩 축소 */
  #header {
    padding: 0 10px !important;
  }

  /* 3. 요소 간 간격(Gap) 축소 */
  .header-left, .header-right {
    gap: 8px !important; /* 기존 16px -> 8px */
  }

  /* 4. 로고 텍스트 크기 조정 */
  .logo {
    /*font-size: 16px !important;*/
  }

  /* 5. 사용자 프로필 영역 패딩 제거 */
  .user-profile {
    padding: 0 !important;
  }

  /* 6. 모드 전환 버튼 더 슬림하게 */
  .btn-mode-switch {
    height: 26px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    margin-right: 2px !important;
  }
}


/* ==========================================================================
   알림 래퍼 및 뱃지
   ========================================================================== */
.notification-wrapper { position: relative; display: flex; align-items: center; margin-right: 15px; }
.btn-notification { background: none; border: none; cursor: pointer; position: relative; padding: 5px; display: flex; align-items: center; justify-content: center; color: var(--toggle-icon); }
.btn-notification:hover { background-color: var(--toggle-hover); border-radius: var(--radius-base); }
.noti-badge { position: absolute; top: 0; right: 0; background-color: var(--danger-color); color: var(--text-white); font-size: 10px; font-weight: bold; padding: 2px 5px; border-radius: 10px; line-height: 1; transform: translate(20%, -20%); }

/* 알림 드롭다운 팝업 (글로벌 변수 적용) */
.noti-dropdown { display: none; position: absolute; top: 100%; right: -10px; width: 320px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-base); box-shadow: var(--shadow-card); z-index: var(--z-header); margin-top: 10px; overflow: hidden; }
.noti-dropdown.show { display: block; }

/* 드롭다운 내부 요소 */
.noti-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--border-color); background-color: var(--bg-content); font-weight: bold; font-size: 13px; color: var(--text-primary); }
.noti-header a { color: var(--primary-color); text-decoration: none; font-size: 12px; font-weight: normal; cursor: pointer; }
.noti-header a:hover { color: var(--primary-hover); }

.noti-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.noti-item { padding: 12px 15px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s; }
.noti-item:hover { background-color: var(--hover-bg); }

/* 미확인 알림 배경색 (Primary Color의 투명도 활용) */
.noti-item.unread { background-color: rgba(197, 108, 134, 0.08); }
[data-theme="dark"] .noti-item.unread { background-color: rgba(197, 108, 134, 0.15); }

.noti-title { margin: 0 0 5px 0; font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.noti-time { margin: 0; font-size: 11px; color: var(--text-tertiary); }

.noti-footer { text-align: center; padding: 10px; border-top: 1px solid var(--border-color); font-size: 12px; background-color: var(--bg-card); }
.noti-footer a { color: var(--text-secondary); text-decoration: none; }
.noti-footer a:hover { color: var(--text-primary); }



/* [Publishing Placeholder] 그리드 영역 표시용 */
.pub-grid-placeholder {
  width: 100%;
  height: 400px; /* 임시 높이 */
  background-color: var(--bg-content);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: 16px;
}



/* ==========================================
   권한별 아바타 배경 및 아이콘 색상
========================================== */
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* 마스크 이미지에 색상을 입히기 위해 background-color 사용 */
.user-avatar .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

/* [영업관리] 보라색 (최고 권한, 시스템) */
.avatar-admin {
  background-color: #F3E8FF; /* 연한 보라 배경 */
}
.avatar-admin .icon {
  background-color: #9333EA; /* 진한 보라 아이콘 */
}

/* [영업지원] 파란색 (지원, 신뢰) */
.avatar-support {
  background-color: #E0F2FE; /* 연한 파랑 배경 */
}
.avatar-support .icon {
  background-color: #0284C7; /* 진한 파랑 아이콘 */
}

/* [영업팀장] 초록색 (성장, 리더십) */
.avatar-leader {
  background-color: #DCFCE7; /* 연한 초록 배경 */
}
.avatar-leader .icon {
  background-color: #16A34A; /* 진한 초록 아이콘 */
}

/* [영업사원] 회색/검정 (기본) */
.avatar-rep {
  background-color: #F1F5F9; /* 연한 회색 배경 */
}
.avatar-rep .icon {
  background-color: #475569; /* 진한 회색 아이콘 */
}

/* ==========================================================================
   [Header User Dropdown Layer]
   ========================================================================== */
.header-user-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}

/* 아바타 버튼 */
.btn-user-avatar {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.btn-user-avatar:hover {
  background-color: var(--hover-bg);
}

/* 드롭다운 레이어 (Toss Style) */
.user-dropdown-layer {
  display: none; /* JS에서 fadeToggle 제어 */
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px; /* 240px에서 200px로 살짝 줄여서 더 컴팩트하게 조정 (선택사항) */
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  z-index: var(--z-overlay);
  overflow: hidden;
}

/* 드롭다운 헤더 (사용자 정보 요약) - 현재 HTML에 없더라도 추후 확장을 위해 유지 */
.user-dropdown-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-base);
}

.user-dropdown-header .user-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.user-dropdown-header .user-dept {
  display: block;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* 드롭다운 메뉴 리스트 (HTML의 dropdown-list 클래스도 함께 호환되도록 다중 선택자 적용) */
.user-dropdown-menu,
.dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 드롭다운 아이템 (눌림 현상 및 테두리 완벽 제거) */
.user-dropdown-menu li a,
.user-dropdown-menu li button,
.dropdown-list li a,
.dropdown-list li button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 20px; /* 상하 패딩을 10px -> 12px로 늘려 눌림 현상 해소 */
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;

  /* 글로벌 버튼/링크 스타일 강제 초기화 */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  box-sizing: border-box;

  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* 호버 상태 */
.user-dropdown-menu li a:hover,
.user-dropdown-menu li button:hover,
.dropdown-list li a:hover,
.dropdown-list li button:hover {
  background-color: var(--hover-bg);
  color: var(--text-primary);
}

/* 아이콘 간격 및 투명도 조정 */
.user-dropdown-menu li i.icon,
.dropdown-list li i.icon {
  margin-right: 12px; /* 10px -> 12px로 아이콘과 텍스트 사이 여백 확보 */
  opacity: 0.8;
}

/* ==========================================================================
   [Responsive Design - Mobile]
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* 모바일에서는 드롭다운이 화면 우측 상단에 꽉 차거나 여백을 두어 표시되도록 조정 */
  .user-dropdown-layer {
    position: fixed;
    top: var(--header-height);
    right: 16px;
    width: calc(100% - 32px);
    max-width: 320px;
  }
}