/* ============================================================================
  AdminLTE skin-green-light 사용자 커스텀
  - 브랜드 컬러: #2a7b70 / hover: #256b62
  - 상단바/로고/드롭다운 헤더 색 통일
  - 유저 드롭다운을 카드처럼 보이게 정리
============================================================================ */

/* 0) 선택 사항: 브랜드 컬러 변수 (다른 곳에서 재사용 가능) */
:root{
  --brand:#2a7b70;
  --brand-hover:#256b62;
  --brand-border: rgba(42,123,112,0.35);
}

/* Paperozi (Paperlogy) 100~900 */
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
  font-weight:100; font-display:swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
  font-weight:200; font-display:swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight:300; font-display:swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight:500; font-display:swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight:600; font-display:swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight:800; font-display:swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-weight:900; font-display:swap;
}

/* 상단 네비게이션 텍스트에 Paperozi 적용 */
.skin-green-light .main-header,
.skin-green-light .main-header .navbar,
.skin-green-light .main-header .navbar .nav > li > a,
.skin-green-light .main-header .logo .logo-lg,
.skin-green-light .main-header .logo .logo-mini {
  font-family: 'Paperozi', "Malgun Gothic", Arial, sans-serif !important;
  font-weight: 500; /* 필요시 400~600에서 선택 */
  letter-spacing: -0.2px; /* 살짝 세련되게 */
}

/* 1) 헤더(상단바/로고) 기본 오버라이드 */
.skin-green-light .main-header .navbar,
.skin-green-light .main-header .logo {
  background-color: var(--brand) !important;
}
.skin-green-light .main-header .logo:hover {
  background-color: var(--brand-hover) !important;
}
.skin-green-light .main-header .navbar .nav > li > a { color:#fff; }

/* 2) 토글 & 네비 hover 미세 조정 (높이 변형 방지) */
.skin-green-light .main-header .navbar .sidebar-toggle:hover,
.skin-green-light .main-header .navbar .nav > li > a:hover,
.skin-green-light .main-header .navbar .nav > li > a:focus {
  background: rgba(0,0,0,.08) !important;
  color:#f6f6f6;
}
.main-header .navbar .navbar-nav > li > a{
  /* AdminLTE 기본 패딩 유지로 줄높이 변형 방지 */
  padding-top:10px; 
  padding-bottom:10px;
}
/* 긴 이름 줄바꿈 방지 */
.navbar .navbar-nav > li.user .dropdown-toggle{ white-space:nowrap; }

/* 3) 상단바 내 아바타 아이콘(작은 원형) */
.navbar .avatar-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px; height:26px;
  font-size:14px; line-height:1;
  color:#fff;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  vertical-align:middle;
  margin-right:6px;
  box-sizing:border-box;
}

/* 3-0) 원격지원 버튼 스타일 */
.navbar-nav > .remote-support-menu > a {
  padding: 15px 15px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.navbar-nav > .remote-support-menu > a > .fa-desktop {
  font-size: 16px;
}
.navbar-nav > .remote-support-menu > a > span {
  font-size: 13px;
  font-weight: 500;
}

/* 3-1) 알림 메뉴 스타일 */
.navbar-nav > .notifications-menu > a {
  position: relative;
  padding: 15px 15px !important;
}
.navbar-nav > .notifications-menu > a > .fa-bell-o,
.navbar-nav > .notifications-menu > a > .fa-user-plus {
  font-size: 18px;
}
.navbar-nav > .notifications-menu > a > .label {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 600;
  min-width: auto;
  border-radius: 10px;
  display: inline-block;
}

/* 3-1-2) 친구맺기 메뉴 아이콘 색상 */
.navbar-nav > .friend-menu > a > .fa-user-plus {
  color: #fff;
}

/* 3-2) 헤더 메뉴 사이 구분선 */
.navbar-custom-menu .navbar-nav > li {
  position: relative;
}
.navbar-custom-menu .navbar-nav > li::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.3);
}
.navbar-custom-menu .navbar-nav > li:last-child::after {
  display: none;
}

/* 4) 유저 드롭다운: 컨테이너(카드처럼) + 위치 */
.navbar-nav > .user-menu > .dropdown-menu{
  /* 카드 느낌 */
  border:1px solid var(--brand-border) !important;
  border-radius:14px !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.18) !important;
  overflow:hidden !important;
  padding:0 !important;

  /* 위치/정렬 */
  right:0 !important;
  left:auto !important;
  transform:none !important;
  top:50px !important;
}

/* 5) 드롭다운 상단 프로필 영역 */
.skin-green-light .main-header li.user-header,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header{
  background-color: var(--brand) !important;
  padding:22px 20px !important;
  text-align:center;
}

/* 6) 프로필 아이콘(큰 원형) ? 번짐/반사 제거 */
.user-header .avatar-icon-lg,
.user-header .fa-user,
.user-header .fa-user-o,
.user-header .fa-user-secret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px; height:72px;
  border-radius:50%;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  outline:none !important;
  font-size:36px;
  color:#fff !important;
  margin-bottom:12px;
}
/* AdminLTE 기본 프로필 이미지 보더 제거 */
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header img{
  height:90px; width:90px;
  border:none !important;
  box-shadow:none !important;
}

/* 7) 이름 텍스트 */
.user-header p{
  margin:6px 0 0;
  color:#fff !important;
  font-size:16px;
  font-weight:600;
}

/* 8) 드롭다운 하단 버튼 영역 */
.navbar-nav > .user-menu > .dropdown-menu > li.user-footer{
  background:#fff !important;
  padding:16px !important;
  display:flex !important;
  justify-content:space-between;
  gap:10px !important;
  border-top:1px solid var(--brand-border) !important;
}
/* 공통 버튼 */
.navbar-nav > .user-menu .user-footer .btn{
  flex:1;
  border-radius:10px;
  font-weight:600;
  font-size:13px;
  padding:7px 14px;
}
/* 회원정보(라인형) */
.navbar-nav > .user-menu .user-footer .btn-default{
  background:#fff !important;
  color:var(--brand) !important;
  border:1px solid var(--brand-border) !important;
  transition:all .25s ease;
}
.navbar-nav > .user-menu .user-footer .btn-default:hover{
  background:var(--brand) !important;
  color:#fff !important;
  border-color:var(--brand) !important;
}
/* 로그아웃(톤다운 레드) */
.navbar-nav > .user-menu .user-footer .btn-danger{
  background:#e96a60 !important;
  border:none !important;
}
.navbar-nav > .user-menu .user-footer .btn-danger:hover{
  background:#d84840 !important;
}
		
/* ===============================
 Sidebar User Panel ? Modern Card
 - Paperozi 폰트 사용
 - 사이드바 폭 내에서만 표시(오버플로 방지)
 - AdminLTE 기본 float 해제 → flex 재배치
================================= */

/* 0) 폰트 적용 범위(이름/포인트만) */
.main-sidebar .user-panel .info,
.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info p {
  font-family: "Paperozi","Malgun Gothic",Arial,sans-serif;
}

/* 1) 카드 컨테이너 */
.main-sidebar .user-panel{
  /* 사이드바 안쪽 여백 + 카드 스타일 */
 	margin: 6px 8px;        /* 기존 10px 12px → 줄임 */
  padding: 8px 10px;      /* 기존 10px 12px → 줄임 */
  background: #fff;
  border: 1px solid rgba(42,123,112,.18);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  box-sizing: border-box;

  /* 레이아웃 */
  display: flex;
  align-items: center;
  gap: 0px;

  /* 폭 제한 & 오버플로 방지 */
  width: auto;          /* ? 폭 계산 자동화 */
  max-width: calc(100% - 16px); /* ? 좌우 여백 포함 안전하게 */
  box-sizing: border-box;
  overflow: hidden;     /* ? 내용이 넘쳐도 박스 밖으로 안 나오게 */
}

/* 2) AdminLTE 기본 float 해제 */
.main-sidebar .user-panel .pull-left{ float:none !important; }

/* 3) 아바타 */
.main-sidebar .user-panel .image{
  flex: 0 0 auto;
}
.main-sidebar .user-panel .image img{
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.06);
  display: block;
}

/* 4) 텍스트 영역 */
.main-sidebar .user-panel .info{
  flex: 1 1 auto;
  min-width: 0;           /* ellipsis를 위한 최소폭 */
  line-height: 1.25;
}
.main-sidebar .user-panel .info > p{
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 이름 길어도 한 줄로 */
  max-width: 100%; /* ? 이름 길이에 따라 자동으로 ... 처리 */
  display: block;   /* ? inline 상태에서 ellipsis 누락 방지 */
}

/* 포인트 줄 */
.main-sidebar .user-panel .info > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b6b74;
  font-size: 12.5px;
  text-decoration: none;
}
.main-sidebar .user-panel .info > a .text-success{
  color: #29a36a !important;  /* 온라인 점 색상 살짝 개선 */
}

.user-panel>.info {
    padding: 5px 5px 5px 8px;
}

/* 5) 사이드바 축소 모드 대응(오버플로 방지) */
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel{
  margin: 8px 6px;
  padding: 8px;
  border-radius: 10px;
  justify-content: center;
}
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .info{ display:none; }
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .image img{
  width: 30px; height: 30px;
}


/* 6) 고해상도/모바일 미세 조정 */
@media (max-width: 1280px){
  .main-sidebar .user-panel{ border-radius: 12px; }
  .main-sidebar .user-panel .image img{ width: 42px; height: 42px; }
}

#btn_rmmaster_print {
  background-color:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
}

#btn_rmmaster_print:hover,
#btn_rmmaster_print:focus,
#btn_rmmaster_print:active,
#btn_rmmaster_print.active {
  background-color:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
}

/* =========================================================
   Paperozi Font System
   ---------------------------------------------------------
   목적:
   - Paperozi 폰트를 공통으로 정의
   - 전체 적용 / 영역 적용 / 요소별 적용을 선택 가능
   - 기존 Bootstrap/AdminLTE 스타일과 충돌 최소화
   ========================================================= */

/* 1. 기본 폰트 패밀리 정의 */
:root {
  --font-paperozi: 'Paperozi', 'Malgun Gothic', 'Apple SD Gothic Neo',
                   'Noto Sans KR', Arial, sans-serif;
}

/* 2. 전체 페이지에 Paperozi 적용 (필요 시 body에 클래스 추가) */
body.font-paperozi {
  font-family: var(--font-paperozi);
}

/* 3. 공통 UI 요소용 (폼, 버튼, 라벨 등) */
.font-paperozi,
.font-paperozi * {
  font-family: var(--font-paperozi) !important;
}

.light_font{font-family: 'Paperozi', 'Malgun Gothic', sans-serif;}


/* =========================================================
   Common UI Pack
   1) Top Monthly Stats (Year Nav + 12-month grid)
   2) Search Summary Bar (Current filter + actions + sort)
   ========================================================= */

:root{
  --ui-font: 'Paperozi','Malgun Gothic',sans-serif;

  /* Top Monthly Stats */
  --tms-border: #e1e4e8;
  --tms-border-2: #dfdfdf;
  --tms-bg-head: #f6f8fa;
  --tms-bg-empty: #fafbfc;
  --tms-bg-current: #efefef;
  --tms-bg-current-head: #5b6c80;
  --tms-bg-hover-col: #f1f1f1;
  --tms-text: #24292e;
  --tms-text-sub: #586069;
  --tms-text-empty: #959da5;
  --tms-sale: #555;

  /* Search Summary */
  --sum-bg-1: #e8f4fc;
  --sum-bg-2: #f0f8ff;
  --sum-border: #3c8dbc;
  --sum-text: #2c5f8d;
  --sum-vr: rgba(0,0,0,0.15);
}

/* =========================================================
   1) Top Monthly Stats
   ========================================================= */

.top-stats-container{
  margin: 1.5em 0.5em 15px 0.5em;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--ui-font);
}

.top-stats-header{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  margin-bottom:10px;
  padding-bottom:8px;
}

.top-stats-year-nav{
  display:flex;
  align-items:center;
  gap:8px;
}

.top-stats-year-label{
  font-size:20px;
  color: var(--tms-text);
  font-weight:600;
  min-width:80px;
  text-align:center;
}

/* 네비 버튼(bootstrap btn 없어도) */
.top-stats-year-nav .btn{
  padding:3px 8px;
  border-radius:4px;
  border:1px solid #d1d5da;
  background:#fff;
  color: var(--tms-text-sub);
  transition: all .2s ease;
  cursor:pointer;
}
.top-stats-year-nav .btn:hover{
  background:#f3f4f6;
  border-color:#959da5;
  color: var(--tms-text);
}

/* 테이블 스크롤 래퍼 */
.top-stats-table-wrapper{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#d1d5da #f6f8fa;
}
.top-stats-table-wrapper::-webkit-scrollbar{ height:6px; }
.top-stats-table-wrapper::-webkit-scrollbar-track{
  background:#f6f8fa;
  border-radius:3px;
}
.top-stats-table-wrapper::-webkit-scrollbar-thumb{
  background:#d1d5da;
  border-radius:3px;
}
.top-stats-table-wrapper::-webkit-scrollbar-thumb:hover{
  background:#959da5;
}

/* 통계 테이블 */
#top-stats-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
  white-space:nowrap;
  border:1px solid var(--tms-border);
}
#top-stats-table th,
#top-stats-table td{
  padding:6px 8px;
  text-align:center;
  border:1px solid var(--tms-border-2);
  box-sizing:border-box;
}

#top-stats-table thead th{
  background: var(--tms-bg-head);
  color: var(--tms-text);
  font-weight:600;
  font-size:12px;
  position:sticky;
  top:0;
  z-index:1;
  cursor:pointer;
  transition: all .2s ease;
}

#top-stats-table thead th.current-month-header{
  background: var(--tms-bg-current-head);
  color:#fff;
}

#top-stats-table thead th.col-hover,
#top-stats-table tbody td.col-hover{
  background: var(--tms-bg-hover-col) !important;
  color:#333;
}

#top-stats-table tbody td{
  background:#fff;
  color:#555;
  font-size:12px;
  cursor:pointer;
  transition: all .2s ease;
  min-width:80px;
}

/* 판매 행(현재 구조는 판매 1행만 사용) */
#top-stats-table tbody td.row-sale{
  color: var(--tms-sale);
  font-weight:600;
  padding:1em 0;
}

#top-stats-table tbody td.empty-month{
  background: var(--tms-bg-empty);
  color: var(--tms-text-empty);
  cursor:default;
  padding-top:10px !important;
  padding-bottom:10px !important;
  line-height:1.45;
}

#top-stats-table tbody td.current-month{
  background: var(--tms-bg-current);
  font-weight:600;
}

/* 반응형 */
@media (max-width: 768px){
  .top-stats-header{ flex-wrap:wrap; gap:8px; }
  #top-stats-table th,
  #top-stats-table td{
    padding:4px 6px;
    font-size:10px;
  }
}
@media (max-width: 480px){
  .top-stats-container{
    padding:8px 10px;
    margin:0 0 15px 0;
  }
  #top-stats-table th,
  #top-stats-table td{
    padding:3px 4px;
    font-size:9px;
    min-width:60px;
  }
}

/* =========================================================
   2) Search Summary Bar (현재 검색 조건 + 액션 버튼 + 정렬)
   ========================================================= */

.search-summary{
  margin: 0 0.5em;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--sum-bg-1) 0%, var(--sum-bg-2) 100%);
  border-left: 4px solid var(--sum-border);
  border-radius: 6px;
  position: relative;
  overflow: hidden;

  font-family: var(--ui-font);
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 배경 패턴 */
.search-summary::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:100px;
  height:100%;
  background: radial-gradient(circle, rgba(60,141,188,0.05) 0%, transparent 70%);
  pointer-events:none;
}

.search-summary strong{
  color: var(--sum-text);
  font-weight:600;
}

.search-summary .text-primary{
  font-weight:600;
}

/* 좌/우 영역 */
.search-summary .summary-left{
  flex:1;
  min-width:0;
}
.search-summary .summary-right{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* 버튼 그룹(입금처리/취소) */
.search-summary .btn-group-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* 버튼 공통(기존 bootstrap btn과 충돌 최소화: margin만 정리) */
.search-summary .summary-right .btn{
  margin:0;
  padding-left:12px;
  padding-right:12px;
}

/* 구분선 */
.search-summary .summary-right .vr{
  width:1px;
  height:22px;
  background: var(--sum-vr);
  display:inline-block;
}

/* 정렬 셀렉트 */
.search-summary .summary-right .sort-select{
  display:inline-block;
  width:auto;
  min-width:100px;
  font-weight:400;
  font-size:14px;
  height:30px;
  padding:4px 10px;
}

/* 라벨(미수건만/수금건만/전체) */
.search-summary .label{
  margin-left:10px;
  padding:4px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:600;
  box-shadow:0 2px 4px rgba(0,0,0,0.10);
}

/* 라벨 색상(기존 bootstrap label-*과 같이 쓰되 그라데이션만 보강) */
.search-summary .label-danger{
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
.search-summary .label-success{
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
}
.search-summary .label-info{
  background: linear-gradient(135deg, #3c8dbc 0%, #2c7ba5 100%);
}

/* 모바일 상세검색 버튼 (PC 숨김) */
.search-summary .btn-mobile-search {
  display: none;
}

/* 모바일: 검색조건/버튼 세로 배치 + 리스트와 간격 */
@media (max-width: 768px){
  .search-summary{
    flex-direction:column;
    align-items:stretch;
    margin-bottom:14px; /* 검색조건과 리스트 사이 여백 */
  }
  .search-summary .summary-right .btn{
    width:100%;
  }
  .search-summary .btn-mobile-search {
    display: inline-block;
    align-self: flex-start;
    margin-top: 8px;
  }
}


/* =========================================================
   3) 모바일 UI 개선 (list_order)
   ========================================================= */

/* 모바일 전용 액션 바 */
.mobile-action-bar {
  display: none !important; /* PC에서 숨김 */
  padding: 10px 15px;
  gap: 10px;
  border-bottom: 1px solid #ddd;
  background: #f9f9f9;
}

/* 모바일 반응형 - list_order 전용 */
@media (max-width: 768px) {
  /* 월별 탭 가로 스크롤 */
  .top-stats-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #top-stats-table {
    min-width: 600px; /* 12개월이 모두 보이도록 최소 너비 지정 */
  }

  /* search-summary 우측 버튼 영역 숨김 */
  .search-summary .summary-right {
    display: none;
  }

  /* 모바일 액션 바 표시 */
  .mobile-action-bar {
    display: flex !important;
    align-items: center;
  }

  .mobile-action-bar .btn {
    flex-shrink: 0;
  }

  .mobile-action-bar select {
    width: auto;
    flex-grow: 1;
  }

  /* 상세검색 영역 조정 */
  .detail-search-area .row > div {
    margin-bottom: 10px;
  }
}

/* ===========================================
   빠른검색 메뉴 활성화 상태 스타일
   =========================================== */
.nav-pills.nav-stacked > li > a {
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.nav-pills.nav-stacked > li > a:hover {
  background-color: #f5f9fc !important;
  border-left: 3px solid #a8d4f0;
}

.box-primary .box-body.no-padding .nav-pills.nav-stacked > li.active > a,
.box-primary .box-body.no-padding .nav-pills.nav-stacked > li.active > a:hover,
.box-primary .box-body.no-padding .nav-pills.nav-stacked > li.active > a:focus,
.nav-pills.nav-stacked > li.active > a,
.nav-pills.nav-stacked > li.active > a:hover,
.nav-pills.nav-stacked > li.active > a:focus {
  background-color: #e8f4fc !important;
  color: #2b6a94 !important;
  border-left: 3px solid #3c8dbc !important;
  font-weight: 600;
}


/* =========================================================
   달력 커스텀 Compact-Premium Datepicker (Balanced Spacing)
   - slightly relaxed vertical spacing
   - global apply (no body class)
   ========================================================= */

/* 전체 카드 */
.datepicker.dropdown-menu {
  padding: 7px 9px !important;          /* ← 살짝 여유 */
  border-radius: 13px !important;
  background: #ffffff !important;
  border: none !important;
  margin-top: 5px !important;

  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.15),
    0 3px 7px rgba(0, 0, 0, 0.10) !important;
}

/* 꼬리 제거 */
.datepicker:before,
.datepicker:after {
  display: none !important;
}

/* 폰트 */
.datepicker,
.datepicker * {
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif !important;
  letter-spacing: -0.01em;
}

/* 테이블 */
.datepicker table {
  border-collapse: separate !important;
  border-spacing: 2px 1px !important;  /* ← 세로 여백 복원 */
  margin: 0 !important;
}

/* 월/연도 헤더 */
.datepicker .datepicker-switch {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 4px 0 3px !important;       /* ← 숨통 */
}

/* prev / next */
.datepicker .prev,
.datepicker .next {
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
}

/* 요일 */
.datepicker table tr th.dow {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;

  width: 24px !important;
  height: 20px !important;
  line-height: 20px !important;
  padding: 0 !important;
}

/* 날짜 셀 */
.datepicker table tr td.day {
  width: 24px !important;
  height: 23px !important;              /* ← 핵심 */
  line-height: 23px !important;

  padding: 0 !important;
  border-radius: 999px !important;

  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
}

/* hover */
.datepicker table tr td.day:hover {
  background: #f1f5f9 !important;
}

/* 오늘 */
.datepicker table tr td.today {
  background: #eef2ff !important;
  color: #1e3a8a !important;
  font-weight: 600 !important;
}

/* 선택 날짜 */
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background: linear-gradient(135deg, #3c8dbc, #2563eb) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* 이전/다음달 */
.datepicker table tr td.old,
.datepicker table tr td.new {
  color: #cbd5e1 !important;
}

/* =========================================================
   Daterangepicker Premium Theme (Paperozi)
   - for #edt_period (bootstrap-daterangepicker)
   - global apply (no body class)
   ========================================================= */

/* 1. 전체 강제 적용(*) 제거 및 기본 래퍼 설정 */
.daterangepicker {
  border: none !important;
  border-radius: 13px !important;
  background: #fff !important;
  padding: 10px 10px 10px !important;
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.15),
    0 3px 7px rgba(0, 0, 0, 0.10) !important;
}

/* 2. 폰트가 필요한 "텍스트/숫자" 요소에만 핀포인트 적용 */
.daterangepicker td.available,      /* 날짜 숫자 */
.daterangepicker th.month,         /* 월/연도 텍스트 */
.daterangepicker th.weekday,       /* 요일 텍스트 */
.daterangepicker .drp-buttons,     /* 하단 버튼 영역 */
.daterangepicker .ranges li,       /* 왼쪽 퀵 레인지 목록 */
.daterangepicker .ranges .input-mini, /* 오른쪽 인풋박스*/
.daterangepicker label, /* 오른쪽 레이블*/
.daterangepicker .drp-selected {   /* 선택된 날짜 노출 텍스트 */
  font-family: "Paperozi", "Malgun Gothic", sans-serif !important;
  letter-spacing: -0.01em;
}

/* 3. 화살표 버튼(prev, next) 설정 유지 */
.daterangepicker .calendar-table th.prev,
.daterangepicker .calendar-table th.next {
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  /* color: transparent !important; <- 만약 아이콘이 안 보인다면 이 줄을 삭제하거나 적절한 색상을 주세요 */
  color: #374151 !important; 
}

/* 4. (참고) 만약 화살표가 여전히 이상하다면, 해당 부분만 아이콘 폰트를 재지정 */
.daterangepicker .calendar-table th.prev span,
.daterangepicker .calendar-table th.next span {
  font-family: "Font Awesome 5 Free", "FontAwesome" !important; /* 사용 중인 버전 확인 필요 */
  font-weight: 900;
}

.daterangepicker {
  border: none !important;
  border-radius: 13px !important;
  background: #fff !important;
  padding: 10px 10px 8px !important;
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.15),
    0 3px 7px rgba(0, 0, 0, 0.10) !important;
}

/* 상단 기간 표시 영역 */
.daterangepicker .drp-calendar {
  padding: 0 !important;
}

.daterangepicker .calendar-table {
  border: none !important;
  background: transparent !important;
  padding: 6px 6px 4px !important;
  border-radius: 12px !important;
}

/* 월/연도 헤더 */
.daterangepicker .calendar-table th.month {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 6px 0 6px !important;
}

/* prev/next */
.daterangepicker .calendar-table th.prev,
.daterangepicker .calendar-table th.next {
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
}

.daterangepicker .calendar-table th.prev:hover,
.daterangepicker .calendar-table th.next:hover {
  background: #e9edf3 !important;
}

/* 요일 */
.daterangepicker .calendar-table th.weekday {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  padding: 4px 0 !important;
}

/* 날짜 셀 - 모든 td에 동일한 높이 적용 */
.daterangepicker .calendar-table td {
  width: 28px !important;
  height: 26px !important;
  line-height: 26px !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* 날짜 셀 (숨통 있는 컴팩트) */
.daterangepicker td.available {
  border-radius: 999px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
}

.daterangepicker td.available:hover {
  background: #f1f5f9 !important;
}

/* 비활성(이전/다음달) */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  color: #cbd5e1 !important;
  background: transparent !important;
}

/* 범위(in-range) */
.daterangepicker td.in-range {
  background: #eef2ff !important;
  color: #1e3a8a !important;
}

/* 시작/끝(선택) */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background: linear-gradient(135deg, #3c8dbc, #2563eb) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* 하단 버튼 영역 */
.daterangepicker .drp-buttons {
  border-top: 1px solid #eef2f7 !important;
  padding: 8px 8px 4px !important;
}

.daterangepicker .drp-buttons .btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 6px 10px !important;
}

/* 적용/취소 버튼 톤 */
.daterangepicker .drp-buttons .btn.btn-primary {
  background: #3c8dbc !important;
  border-color: #3c8dbc !important;
}

.daterangepicker .drp-buttons .btn.btn-default {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

/* 달력 레인지 인풋 여백 조절 */
.daterangepicker .ranges .input-mini {
    padding:3px 0;
    text-align:center;
    font-weight: 500 !important;
}

/* 검색 입력란 글씨 두께 + Paperozi 폰트 */
#edt_period
{
    font-family: 'Paperozi', 'Malgun Gothic', sans-serif !important;
    font-weight: 500 !important;
}

/* 1) prev/next 셀 안의 실제 표시 텍스트는 숨김 */
.daterangepicker .calendar-table th.prev,
.daterangepicker .calendar-table th.next {
  position: relative !important;
  color: transparent !important; /* ≪ ≫ 숨김 */
}


/* =========================================================
   Modern Header Navigation - Soft Glass Style
   2025-2026 트렌드: Glass Morphism + Micro Interactions
   ========================================================= */

/* 헤더 메뉴 컨테이너 - 오른쪽 여백 완전 제거 */
.main-header .navbar-custom-menu,
.main-header .navbar-right,
.navbar-custom-menu,
.navbar-right {
  margin-right: -8px !important;
  padding-right: 0 !important;
  right: 0 !important;
}

.main-header .navbar-custom-menu > .navbar-nav,
.navbar-custom-menu > .navbar-nav {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.header-nav-modern {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-right: 0 !important;
  list-style: none !important;
}

/* 마지막 메뉴 아이템 (사용자) 오른쪽 여백 제거 */
.header-nav-modern > .nav-item-modern:last-child > .nav-link-modern {
  padding-right: 6px !important;
  margin-right: 0 !important;
}

/* 메뉴 아이템 */
.nav-item-modern {
  list-style: none !important;
  position: relative !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* 구분선 (|) 스타일 */
.header-nav-modern > .nav-item-modern::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  right: -4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.35) !important;
}

.header-nav-modern > .nav-item-modern:last-child::after {
  display: none !important;
}

/* 메뉴 링크 - 미니멀 스타일 (배경 없음) */
.nav-link-modern {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 15px 14px !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  height: 50px !important;
  box-sizing: border-box !important;
}

.nav-link-modern:hover,
.nav-link-modern:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.nav-link-modern:active {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Lucide 아이콘 스타일 */
.nav-link-modern svg,
.nav-link-modern [data-lucide] {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8 !important;
  flex-shrink: 0 !important;
}

/* 메뉴 텍스트 */
.nav-link-modern .nav-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
}

/* =========================================================
   모던 배지 (알림 숫자)
   ========================================================= */
.badge-modern {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 17px !important;
  text-align: center !important;
  border-radius: 9px !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  animation: badge-pulse 2.5s ease-in-out infinite !important;
  z-index: 10 !important;
  border: none !important;
}

.badge-modern.badge-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.badge-modern.badge-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.badge-modern.badge-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

/* 배지 펄스 애니메이션 */
@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  }
}

/* =========================================================
   모던 아바타 (사용자 아이콘)
   ========================================================= */
.avatar-modern {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

.nav-link-modern:hover .avatar-modern {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.avatar-modern svg,
.avatar-modern [data-lucide] {
  width: 18px !important;
  height: 18px !important;
  color: #fff !important;
}

/* 사용자 이름 */
.nav-link-modern .user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  max-width: 100px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 드롭다운 화살표 */
.nav-link-modern .dropdown-arrow {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.7 !important;
  transition: transform 0.25s ease !important;
  margin-left: -2px !important;
}

.nav-item-modern.open .dropdown-arrow,
.nav-item-modern.dropdown.open .dropdown-arrow {
  transform: rotate(180deg) !important;
}

/* =========================================================
   모던 드롭다운 메뉴
   ========================================================= */
.dropdown-modern {
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  margin-top: 8px !important;
  min-width: 320px !important;
  background: #fff !important;
  right: 0 !important;
  left: auto !important;
}

/* 사용자 드롭다운 팝업 오른쪽 끝에 붙이기 */
.navbar-nav > .user-menu > .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  margin-right: 0 !important;
}

/* 알림/친구요청 드롭다운도 오른쪽 여백 보정 */
.header-nav-modern .dropdown-modern {
  right: 0 !important;
}

.dropdown-modern > li.header {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: none !important;
  position: relative !important;
}

.dropdown-modern > li.header .header-icon {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.9 !important;
}

/* 드롭다운 닫기 버튼 */
.dropdown-modern .dropdown-close {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.dropdown-modern .dropdown-close:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

.dropdown-modern .dropdown-close svg {
  width: 14px !important;
  height: 14px !important;
  color: #fff !important;
}

.dropdown-modern > li .menu {
  max-height: 300px !important;
  overflow-y: auto !important;
  padding: 6px 0 !important;
}

.dropdown-modern > li .menu > li > a {
  display: block !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
}

.dropdown-modern > li .menu > li:last-child > a {
  border-bottom: none !important;
}

.dropdown-modern > li .menu > li > a:hover {
  background: #f8fafc !important;
}

/* 주문 알림 아이템 레이아웃 */
.dropdown-modern .order-item-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}

.dropdown-modern .order-item-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dropdown-modern .order-product {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.dropdown-modern .order-price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--brand) !important;
}

.dropdown-modern .badge-option {
  display: inline-block !important;
  margin-left: 4px !important;
  padding: 1px 5px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #7c3aed !important;
  background: #ede9fe !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
}

.dropdown-modern .order-time {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #f59e0b !important;
  background: #fef3c7 !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}

.dropdown-modern .order-time.urgent {
  color: #dc2626 !important;
  background: #fee2e2 !important;
}

.dropdown-modern .order-time .time-icon {
  width: 11px !important;
  height: 11px !important;
}

.dropdown-modern .order-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #64748b !important;
}

.dropdown-modern .order-info .separator {
  color: #cbd5e1 !important;
}

.dropdown-modern > li.footer {
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 4px !important;
}

.dropdown-modern > li.footer > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  transition: all 0.2s ease !important;
  background: #fafbfc !important;
}

.dropdown-modern > li.footer > a:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

.dropdown-modern .footer-arrow {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.2s ease !important;
}

.dropdown-modern > li.footer > a:hover .footer-arrow {
  transform: translateX(3px) !important;
}

/* 기존 menu-item-content 호환 (친구요청 등) */
.dropdown-modern .menu-item-content h5 {
  margin: 0 0 3px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.dropdown-modern .menu-item-content p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #64748b !important;
}

.dropdown-modern .menu-item-time {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  margin-top: 2px !important;
}

/* 친구요청 알림 아이템 레이아웃 */
.dropdown-modern .friend-item-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}

.dropdown-modern .friend-item-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dropdown-modern .friend-shop {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.dropdown-modern .friend-region {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.dropdown-modern .friend-time {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.dropdown-modern .friend-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #64748b !important;
}

.dropdown-modern .friend-info .separator {
  color: #cbd5e1 !important;
}

/* 친구요청 수락/거절 버튼 영역 */
.dropdown-modern .friend-request-content {
  padding: 10px 16px !important;
  margin: 0 8px 8px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
}

.dropdown-modern .friend-request-content:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.dropdown-modern .friend-actions {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #e2e8f0 !important;
}

.dropdown-modern .friend-actions .btn {
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.dropdown-modern .friend-actions .btn-default {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

.dropdown-modern .friend-actions .btn-default:hover {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

.dropdown-modern .friend-actions .btn-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  border: none !important;
  color: #fff !important;
}

.dropdown-modern .friend-actions .btn-success:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

/* 친구요청 리스트 아이템 (링크 스타일 제거) */
.dropdown-modern > li .menu > li.friend-request-item {
  list-style: none !important;
}

.dropdown-modern > li .menu > li.friend-request-item > a {
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   친구 알림 섹션 헤더 스타일
   ========================================================= */
.dropdown-modern li.friend-section-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  margin: 4px 8px 2px !important;
  background: #f8fafc !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.dropdown-modern li.friend-section-header .section-icon {
  width: 14px !important;
  height: 14px !important;
}

/* 받은 친구요청 섹션 - 회색 배경 + 붉은색 글자 */
.dropdown-modern li.friend-section-header.section-received {
  background: #f8fafc !important;
  color: #dc2626 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-top: 2px !important;
}

.dropdown-modern li.friend-section-header.section-received .section-icon {
  color: #dc2626 !important;
}

/* 보낸 친구요청 섹션 - 회색 배경 + 푸른색 글자 */
.dropdown-modern li.friend-section-header.section-sent {
  background: #f1f5f9 !important;
  color: #0369a1 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-top: 8px !important;
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 12px !important;
}

.dropdown-modern li.friend-section-header.section-sent .section-icon {
  color: #0369a1 !important;
}

/* =========================================================
   친구요청 상태 표시 스타일
   ========================================================= */
.dropdown-modern .friend-state {
  margin-left: auto !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

.dropdown-modern .friend-state.state-accepted {
  background: #dcfce7 !important;
  color: #16a34a !important;
}

.dropdown-modern .friend-state.state-rejected {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.dropdown-modern .friend-state.state-pending {
  background: #fef3c7 !important;
  color: #d97706 !important;
}

/* 보낸 요청 결과 아이템 스타일 */
.dropdown-modern .friend-sent-item .friend-request-content {
  background: #fefefe !important;
  border: 1px solid #f1f5f9 !important;
}

.dropdown-modern .friend-sent-item .friend-request-content:hover {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* 갱신 버튼 스타일 */
.dropdown-modern .friend-actions .btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  color: #fff !important;
}

.dropdown-modern .friend-actions .btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

/* =========================================================
   모바일 반응형
   ========================================================= */
@media (max-width: 768px) {
  .nav-link-modern .nav-text,
  .nav-link-modern .user-name,
  .nav-link-modern .dropdown-arrow {
    display: none !important;
  }

  .nav-link-modern {
    padding: 10px 10px !important;
  }

  .header-nav-modern {
    gap: 6px !important;
    padding: 0 4px !important;
  }

  /* 모바일에서 구분선 높이 줄임 */
  .header-nav-modern > .nav-item-modern::after {
    height: 16px !important;
  }

  /* 모바일 드롭다운 - 화면 가운데 정렬 */
  .dropdown-modern {
    position: fixed !important;
    top: 100px !important;
    left: 10px !important;
    right: auto !important;
    width: calc(100vw - 10px) !important;
    min-width: auto !important;
    max-width: calc(100vw - 10px) !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* 드롭다운 내부 컨텐츠 */
  .dropdown-modern .order-item-main,
  .dropdown-modern .friend-item-main {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .dropdown-modern .order-product,
  .dropdown-modern .friend-shop {
    font-size: 13px !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .dropdown-modern .order-price {
    font-size: 12px !important;
  }

  .dropdown-modern .friend-region {
    font-size: 10px !important;
    padding: 1px 5px !important;
  }

  .dropdown-modern .friend-info {
    font-size: 11px !important;
    flex-wrap: wrap !important;
  }

  .dropdown-modern .friend-actions {
    justify-content: flex-start !important;
  }

  .dropdown-modern .friend-actions .btn {
    padding: 3px 10px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  .nav-link-modern {
    padding: 8px 8px !important;
  }

  .nav-link-modern svg,
  .nav-link-modern [data-lucide] {
    width: 18px !important;
    height: 18px !important;
  }

  .avatar-modern {
    width: 26px !important;
    height: 26px !important;
  }

  .badge-modern {
    min-width: 15px !important;
    height: 15px !important;
    font-size: 9px !important;
    line-height: 15px !important;
    top: 2px !important;
    right: 2px !important;
  }

  /* 480px 이하 드롭다운 추가 조정 */
  .dropdown-modern {
    left: 5px !important;
    right: 5px !important;
  }

  .dropdown-modern .order-product,
  .dropdown-modern .friend-shop {
    max-width: 100px !important;
  }
}


/* =========================================================
   로그인 알림 모달 (미확인 주문 알림)
   ========================================================= */
#loginAlertModal .modal-dialog {
  margin: 120px auto !important;
  width: calc(100% - 10px) !important;
  max-width: 350px !important;
}

@media (min-width: 576px) {
  #loginAlertModal .modal-dialog {
    margin: 150px auto !important;
  }
}

#loginAlertModal .login-alert-modal {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif;
}

#loginAlertModal .modal-body {
  padding: 35px 30px 30px;
}

#loginAlertModal .alert-icon {
  margin-bottom: 15px;
}

#loginAlertModal .alert-icon svg {
  width: 56px;
  height: 56px;
  color: #f59e0b;
  animation: bell-shake 1s ease-in-out infinite;
}

@keyframes bell-shake {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg); }
  20%, 40%, 60%, 80% { transform: rotate(8deg); }
}

#loginAlertModal .alert-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif;
}

#loginAlertModal .alert-count {
  font-size: 42px;
  color: #e74c3c;
  margin: 0 0 5px 0;
  line-height: 1.1;
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif;
}

#loginAlertModal .alert-count strong {
  font-weight: 800;
}

#loginAlertModal .alert-desc {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 25px 0;
}

#loginAlertModal .btn-confirm {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

#loginAlertModal .btn-confirm:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

#loginAlertModal .btn-confirm svg {
  width: 18px;
  height: 18px;
}

#loginAlertModal .btn-dismiss {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  margin-top: 12px;
  padding: 8px 16px;
  transition: color 0.2s ease;
}

#loginAlertModal .btn-dismiss:hover {
  color: #64748b;
  text-decoration: none;
}


/* =========================================================
   미확인 주문 드롭다운 UI 개선
   ========================================================= */

/* 주문번호 스타일 */
.dropdown-modern .order-seq {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-right: 4px !important;
  font-weight: 500 !important;
}

/* 주소 ellipsis (긴 주소 ... 처리) */
.dropdown-modern .order-address,
.dropdown-modern .order-info > span:last-child {
  max-width: 200px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: middle !important;
}


/* =========================================================
   수주 미확인 알림 모달 (모던 스타일)
   - loginAlertModal 스타일 참고
   ========================================================= */
#orderAlarmModal .modal-dialog {
  margin: 120px auto !important;
  width: calc(100% - 20px) !important;
  max-width: 380px !important;
}

@media (min-width: 576px) {
  #orderAlarmModal .modal-dialog {
    margin: 150px auto !important;
  }
}

#orderAlarmModal .order-alarm-modal {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif;
}

#orderAlarmModal .modal-body {
  padding: 35px 30px 30px;
}

/* 알림 아이콘 */
#orderAlarmModal .alarm-icon {
  margin-bottom: 15px;
}

#orderAlarmModal .alarm-icon svg,
#orderAlarmModal .alarm-icon [data-lucide] {
  width: 56px;
  height: 56px;
  color: #f59e0b;
  animation: bell-shake 1s ease-in-out infinite;
}

/* 제목 */
#orderAlarmModal .alarm-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif;
}

/* 건수 배지 */
#orderAlarmModal .alarm-count {
  font-size: 42px;
  color: #e74c3c;
  margin: 0 0 20px 0;
  line-height: 1.1;
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif;
  font-weight: 800;
}

#orderAlarmModal .alarm-count span {
  font-weight: 800;
}

/* 주문 카드 */
#orderAlarmModal .alarm-order-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: left;
}

#orderAlarmModal .order-card-inner {
  /* 카드 내부 */
}

#orderAlarmModal .order-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}

#orderAlarmModal .order-card-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

#orderAlarmModal .order-card-row:first-child {
  padding-top: 0;
}

#orderAlarmModal .order-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  flex-shrink: 0;
  width: 60px;
}

#orderAlarmModal .order-value {
  font-size: 13px;
  color: #1e293b;
  font-weight: 600;
  text-align: right;
  flex: 1;
  word-break: break-word;
}

#orderAlarmModal .order-value.order-product,
#orderAlarmModal .order-value.order-addr {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 나머지 건수 표시 */
#orderAlarmModal .order-more {
  margin-top: 12px;
  padding: 10px 16px;
  background: #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  text-align: center;
}

/* 확인 버튼 */
#orderAlarmModal .btn-confirm {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif;
}

#orderAlarmModal .btn-confirm:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

#orderAlarmModal .btn-confirm svg,
#orderAlarmModal .btn-confirm [data-lucide] {
  width: 18px;
  height: 18px;
}

/* 나중에 버튼 */
#orderAlarmModal .btn-dismiss {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  margin-top: 12px;
  padding: 8px 16px;
  transition: color 0.2s ease;
  font-family: 'Paperozi', 'Malgun Gothic', sans-serif;
}

#orderAlarmModal .btn-dismiss:hover {
  color: #64748b;
  text-decoration: none;
}

/* 모바일 반응형 */
@media (max-width: 480px) {
  #orderAlarmModal .modal-dialog {
    margin: 80px auto !important;
    width: calc(100% - 16px) !important;
  }

  #orderAlarmModal .modal-body {
    padding: 25px 20px;
  }

  #orderAlarmModal .alarm-icon svg,
  #orderAlarmModal .alarm-icon [data-lucide] {
    width: 48px;
    height: 48px;
  }

  #orderAlarmModal .alarm-title {
    font-size: 16px;
  }

  #orderAlarmModal .alarm-count {
    font-size: 36px;
  }

  #orderAlarmModal .alarm-order-card {
    padding: 12px;
  }

  #orderAlarmModal .order-label {
    font-size: 11px;
    width: 55px;
  }

  #orderAlarmModal .order-value {
    font-size: 12px;
  }

  #orderAlarmModal .order-value.order-product,
  #orderAlarmModal .order-value.order-addr {
    max-width: 160px;
  }

  #orderAlarmModal .btn-confirm {
    padding: 12px 16px;
    font-size: 14px;
  }
}


/* =========================================================
   미확인 알림 - 주문 출처 구분 배지 (꽃집/친구)
   ========================================================= */
.badge-source {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  margin-right: 4px;
  color: #fff;
  vertical-align: middle;
}

.badge-source-shop {
  background: #e74c3c;
}

.badge-source-friend {
  background: #9b59b6;
}