/* 1. 테이블 컨테이너 및 세로/가로 스크롤 설정 */
    .gridjs-wrapper {
        max-height: 650px; /* 높이를 살짝 키움 */
        overflow-y: auto !important;  /* 세로 스크롤 */
        overflow-x: auto !important;  /* 가로 스크롤 (모바일 핵심) */
        -webkit-overflow-scrolling: touch; /* 아이폰 스크롤 부드럽게 */
        position: relative !important;
        border-radius: 0 !important;
        border: 1px solid #e2e8f0 !important;
    }
	
	.gridjs-table {
		/* 리사이징 드래그가 먹히려면 fixed가 필수입니다 */
		table-layout: auto !important; 
		width: 100% !important;
		min-width: 1100px; 
		border-collapse: collapse !important;
	}
	

    /* 2. 헤더 고정 및 디자인 */
    .gridjs-thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background-color: #f8f9fa !important;
    }
	
	
	/* 헤더의 기준점 설정 */
    .gridjs-th {
        position: relative !important;
        /*overflow: visible !important; /* 핸들이 밖으로 보여야 함 */		
		
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
    }	
	
	/* 4. 헤더 및 본문 셀 (컴팩트 & 텍스트 제어) */
    .gridjs-thead th {
		position: relative !important; /* 추가 */
        padding: 10px !important;
        background-color: #bee5eb !important; /* 연한 회색 배경 유지 */
        
        /* 페이징 버튼과 맞춘 진함 정도 */
        font-size: 13px !important;
        font-weight: 400 !important;   /* 지우지 말고 400으로 명시하세요 */
        color: #374151 !important;     /* 눈이 훨씬 편해지고 덜 진해 보입니다 */
		
		-webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
        
        /* 경계선 보정 */
        /*border-top: 1px solid #d1d5db !important;
        border-bottom: 1px solid #d1d5db !important;*/ /* 하단 라인을 조금 더 진하게 하여 본문과 구분 */
        
        text-transform: none !important;
        vertical-align: middle !important;
        text-align: center !important;
    }
	
	/* 헤더 내의 텍스트 컨텐츠 위치 미세 조정 */
    .gridjs-th-content {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1.4 !important;
    }
	
	  /* 정렬 아이콘 색상도 조금 더 진하게 */
    button.gridjs-sort {
        opacity: 0.8 !important;
        filter: brightness(0.6) !important; /* 아이콘을 더 검게 표현 */
    }
	
	/* 리사이징 세로 막대 (사용자가 잡는 부분) */
    .resizer-bar {
        position: absolute;
        top: 0;
        right: -5px;
        bottom: 0;
        width: 10px;
        cursor: col-resize !important;
        z-index: 9999;
        background: transparent;
    }

	/* 리사이징 핸들 (가장 중요) */
	.gridjs-resizable {
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 15px !important; /* 잡기 편하게 15px로 확장 */
		cursor: col-resize !important;
		/* 중요: 핸들이 헤더 텍스트나 정렬 버튼보다 무조건 위에 있어야 클릭이 먹힙니다. */
		z-index: 1000 !important; 
		background-color: transparent !important;
		/* 드래그 중 텍스트가 블록 지정되는 것 방지 */
		user-select: none !important; 
	}

    /* 3. 상단 검색 영역 (모바일 대응) */
    .gridjs-head {
        display: flex !important;
        flex-wrap: wrap !important; /* 모바일에서 줄바꿈 허용 */
        justify-content: flex-end !important; 
        padding: 8px 0 !important;
        width: 100% !important;
    }

    .gridjs-search {
        margin-left: auto !important;
    }

    @media (max-width: 768px) {
        .gridjs-search { width: 100% !important; margin: 0 !important; }
        .gridjs-search-input { width: 100% !important; }
    }

    .gridjs-search-input {
        width: 250px !important;
        font-size: 14px !important;
        padding: 6px 10px !important;
        border-radius: 4px !important;
        border: 1px solid #d1d5db !important;
    }

    
	
	.gridjs-tbody td {
        padding: 5px 5px !important;
        font-size: 13px !important;
        color: #2d3748 !important;		
		
        /* 데이터가 길면 ... 처리 (특송 데이터 가시성) */
        /*overflow: hidden !important;*/
        text-overflow: ellipsis !important;
        white-space: nowrap !important; 
		border-bottom: 1px solid #e2e8f0 !important;
    }
	
	/* 마우스를 올렸을 때 행 전체의 td 배경색과 테두리 변경 */
	.gridjs-tr:hover td {
		/* 1. 배경색: 차분하고 고급스러운 회색톤 (Slate 100) */
		background-color: #f1f5f9 !important; 
		
	}

    /* 특정 컬럼(상품명 등)만 줄바꿈 허용하고 싶을 때 사용 */
    .gridjs-td[data-column-id="goods_name"] {
        white-space: normal !important;
        word-break: break-all !important;
    } 

    

    /* 5. 하단 영역 (모바일 대응 페이징) */
    .gridjs-footer {
        display: flex !important;
        justify-content: flex-end !important; /* 내부 콘텐츠를 우측으로 밀기 */
        padding: 8px 16px !important;
        background-color: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    /* 모바일에서도 우측 정렬 유지 또는 중앙 정렬 */
    @media (max-width: 600px) {
        .gridjs-footer {
            justify-content: center !important; /* 모바일은 화면이 좁으므로 중앙 정렬 추천 */
        }
        .gridjs-pagination {
            justify-content: center !important;
        }
    }
	
	/* 페이징 컨테이너 우측 정렬 강제 */
    .gridjs-pagination {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important; /* 전체 너비를 사용하여 우측 정렬 보장 */
        margin: 0 !important;
    }

    .gridjs-summary {
        display: none !important; 
    }

   /* 페이지네이션 버튼 디자인 (기본 유지 및 색상 보정) */
.gridjs-pagination .gridjs-pages button {
    margin-left: 5px !important;
    padding: 6px 12px !important;
    font-weight: 500 !important; 
    font-size: 13.5px !important;
    
    /* 기본 상태: 부드러운 그레이 톤 */
    color: #4b5563 !important; 
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 5px !important;
    transition: all 0.2s ease; /* 부드러운 색상 전환 */
}

/* 현재 페이지 버튼 (Active) - 포인트 컬러 */
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    /* 너무 밝은 파랑 대신, 표의 헤더나 브랜드 색상에 맞춘 묵직한 컬러 */
    background-color: #374151 !important; /* 다크 그레이/블루 톤으로 변경 */
    color: #ffffff !important;
    border-color: #374151 !important;
    font-weight: 700 !important;
}

/* 호버 시 효과 (마우스를 올렸을 때) */
.gridjs-pagination .gridjs-pages button:hover:not(.gridjs-currentPage):not([disabled]) {
    background-color: #f3f4f6 !important; /* 연한 회색 바탕 */
    color: #1f2937 !important;            /* 글자는 더 진하게 */
    border-color: #9ca3af !important;      /* 테두리 강조 */
}

/* 이전/다음 버튼 비활성 상태 (첫 페이지나 마지막 페이지일 때) */
.gridjs-pagination .gridjs-pages button:disabled {
    color: #d1d5db !important;
    border-color: #e5e7eb !important;
    background-color: #f9fafb !important;
    cursor: not-allowed !important;
}

/* 이전(Previous), 다음(Next) 글자 버튼 특별 관리 */
.gridjs-pagination .gridjs-pages button[title="Previous"],
.gridjs-pagination .gridjs-pages button[title="Next"] {
    font-size: 12px !important;
    color: #6b7280 !important;
}



/* 상단, 왼쪽 슬라이드 기본 레이아웃 설정 */
/* [1] 기본 레이아웃 및 폰트 설정 */
.admin-container { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    font-family: 'Pretendard', -apple-system, sans-serif; 
}

.body-container { 
    display: flex; 
    flex: 1; 
    overflow: hidden; 
}

/* [2] 상단 헤더 (Top Navigation) */
.top-header {
    height: 60px;
    background: #0f172a !important; /* 깊은 다크 블루 */
    padding: 0 24px;
    display: flex;
    justify-content: space-between; /* 로고는 왼쪽, 메뉴는 오른쪽 */
    align-items: center;
    border-bottom: 1px solid #1e293b;
    z-index: 100;
}

/* 로고 디자인 (TG EXPRESS) */
/* 로고 영역 컨테이너 간격 확대 */
.logo-area {
    display: flex;
    align-items: center;
    gap: 10px; /* TG와 EXPRESS 사이 간격 넓힘 */
    user-select: none;
    cursor: pointer;
}

/* 'TG' 스타일: 크기를 20px -> 26px로 대폭 상향 */
.logo-tg {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: #ffffff;
    padding: 4px 12px; /* 패딩을 늘려 박스를 더 크게 */
    border-radius: 6px; /* 박스가 커진 만큼 곡률도 조정 */
    font-weight: 900;
    font-size: 26px; /* 글자 크기 상향 */
    letter-spacing: -1px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* 'EXPRESS' 스타일: 크기를 18px -> 24px로 상향 */
.logo-express {
    color: #ffffff;
    font-weight: 800; /* 더 두껍게 */
    font-size: 24px; /* 글자 크기 상향 */
    letter-spacing: 2px; /* 자간을 넓혀 시원하게 */
    font-style: italic;
    position: relative;
    text-transform: uppercase; /* 강제로 대문자 고정 */
}

/* 밑줄 포인트 두께 강화 */
.logo-express::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px; /* 선 두께 강화 */
    background: #3b82f6;
    border-radius: 2px;
}

/* 우측 사용자 메뉴 */
.user-menu {
    white-space: nowrap; /* 메뉴가 아래로 떨어지는 것 방지 */
    display: flex;
    align-items: center;
	gap: 20px; 
}

/* 메뉴 공통 스타일 */
.menu-item { 
    cursor: pointer; 
    color: #cbd5e1; 
    font-size: 14px; 
    display: flex; 
    align-items: center; 
    gap: 6px; /* 아이콘과 글자 사이 간격 */
    transition: all 0.2s ease;
}

.menu-item:hover { color: #fff; }

/* 고객센터 특별 강조 (선택 사항) */
.cs-center {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cs-center:hover {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* 아이콘 스타일 (이미지나 웹폰트 사용 시) */
.menu-item i {
    font-size: 16px;
}

.badge { 
    background: #ef4444; 
    color: white; 
    padding: 2px 6px; 
    border-radius: 10px; 
    font-size: 11px; 
    margin-left: 4px;
}

/* [3] 사이드바 (Side Navigation) */
/* 사이드바 기본 배경 */
/* 사이드바를 flex 구조로 만들어 하단 배치를 제어 */
.side-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 메뉴는 상단, 검색은 하단으로 분리 */
    width: 180px;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
}


@media screen and (max-width: 768px) {
    /* 1. 사이드바 및 레이아웃 초기화 */
    .side-nav {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 10px !important; /* 전체적인 여백 확보 */
        width: 100% !important;
        box-sizing: border-box;
    }
	
	/* 2. 검색 영역을 세로로 배치 */
    .grid-search-area {
        display: flex;
        flex-direction: column; /* 가로 배열을 세로 배열로 변경 */
        gap: 10px; /* 요소 간 간격 */
        width: 100%;
    }
	
	/* 3. 각 그룹(날짜, 센터, 검색) 너비 100% 설정 */
    .date-group, .center-group, .search-group {
        display: flex;
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* 4. 날짜 입력창 1:1 비율로 나누기 */
    .date-input {
        flex: 1; /* 가로 공간을 똑같이 나눠 가짐 */
        width: auto !important;
        min-width: 0; /* flex 환경에서 너비 깨짐 방지 */
    }

    /* 5. 배송센터 셀렉트 박스 100% */
    #jisa {
        width: 100% !important;
    }

    /* 6. 검색어 입력창 + 버튼 레이아웃 */
    .search-group {
        flex-wrap: wrap; /* 버튼이 많으므로 줄바꿈 허용 */
        gap: 3px;
    }

    #keyword {
        flex: 1; /* 검색창이 가능한 많은 공간 차지 */
        min-width: 150px;
    }
	
	/* 1. 버튼들이 포함된 그룹 설정 */
    .search-group {
        display: flex;
        flex-wrap: wrap; /* 공간 부족 시 줄바꿈 */
        gap: 3px; /* 버튼 사이 간격 최소화 */
        margin-top: 5px;
    }

    /* 2. 버튼 공통 축소 스타일 */
    .searchbtn, .excelbtn, .printbtn, .printinfobtn, .deletebtn {
        flex: 1; /* 가로 공간 균등 분할 */
        height: 34px !important; /* 높이를 38px에서 34px로 축소 */
        padding: 0 8px !important; /* 좌우 여백 축소 */
        font-size: 12px !important; /* 글자 크기를 12px로 축소 */
        min-width: 70px; /* 너무 작아지지 않게 최소 너비 설정 */
        white-space: nowrap; /* 글자 줄바꿈 방지 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 3. 아이콘 크기 조절 */
    .searchbtn i, .excelbtn i, .printbtn i, .printinfobtn i, .deletebtn i {
        font-size: 11px !important;
        margin-right: 4px !important;
    }

    /* 4. [고급] 아주 작은 화면(예: 아이폰 SE)에서 텍스트 줄이기 트릭 */
    @media screen and (max-width: 380px) {
        .excelbtn { font-size: 0 !important; } /* '엑셀다운' 글자 숨김 */
        .excelbtn::after { content: '엑셀'; font-size: 12px; } /* 대신 '엑셀'로 표시 */
        
        .printbtn { font-size: 0 !important; } /* '송장출력' 글자 숨김 */
        .printbtn::after { content: '송장'; font-size: 12px; } /* 대신 '송장'으로 표시 */
    }
    
    .top-header {
        padding: 0 8px; /* 여백 최소화 */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 2. 로고 영역 축소 */
    .logo-area {
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 1; /* 로고가 공간을 양보하도록 */
    }
    .logo-express {
        display: none; /* 모바일에선 'TG'만 표시하여 공간 확보 */
    }

    /* 3. 유저 메뉴 영역 (밀림 방지의 핵심) */
    .user-menu {
        display: flex;
        align-items: center;
        flex-shrink: 0; /* 메뉴 영역이 좁아지지 않게 */
    }

    .user-menu .menu-item {
        margin-left: 8px; /* gap 대신 마진 사용 */
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        position: relative; /* 배지 위치 조절용 */
    }

    /* 4. 텍스트 숨기기 및 아이콘 최적화 */
    /* 로그인/로그아웃을 포함한 모든 텍스트를 숨기고 아이콘만 표시 */
    .user-menu .menu-item {
        font-size: 0 !important; 
    }

    .user-menu .menu-item i {
        font-size: 18px !important;
        margin: 0;
    }

    /* 배지 위치를 아이콘 위로 고정 (공간 차지 안 함) */
    .user-menu .badge {
        position: absolute;
        top: -5px;
        right: -8px;
        font-size: 10px;
        padding: 2px 4px;
        border-radius: 10px;
        line-height: 1;
    }

    
}

.menu-group { 
    border-bottom: 1px solid #f1f5f9; 
}

.main-menu {
    flex: 1; /* 상단 메뉴가 남은 공간을 차지하도록 */
    overflow-y: auto;
}

/* 하단 검색 영역 스타일 */
.side-search {
    padding: 20px;
    background: #f8fafc; /* 상단 메뉴와 구분되는 연한 배경색 */
    border-top: 1px solid #e2e8f0;
}


/* 입력창 스타일 */
.side-track-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    margin-bottom: 8px;
    outline: none;
    box-sizing: border-box; /* 패딩이 너비에 영향 주지 않게 */
}

.side-track-input:focus {
    border-color: #3b82f6;
}

/* 버튼 스타일 */
.side-track-btn {
    width: 100%;
    background: #3b82f6; /* 로고의 메인 블루 */
    color: #ffffff;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.side-track-btn:hover {
    background: #1e40af;
}




.menu-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

/* 아이콘 스타일 */
.menu-title i:first-child {
    width: 20px;
    margin-right: 10px;
    color: #94a3b8; /* 기본 아이콘 색상 */
    transition: color 0.2s;
}

/* 호버 및 활성화 상태 */
.menu-title:hover {
    background: #eff6ff;
    color: #1e40af;
}

.menu-title:hover i:first-child {
    color: #3b82f6; /* 호버 시 아이콘 색상 변경 */
}

/* 활성화된 그룹 아이콘 색상 고정 */
.menu-group.active .menu-title {
    color: #1e40af;
    background: #f1f5f9;
}

.menu-group.active .menu-title i:first-child {
    color: #3b82f6;
}


/* 소메뉴 (Sub Menu) 기본 스타일 */
.sub-menu { 
    display: none; 
    background: #ffffff; 
    padding: 4px 0; /* 상하 여백을 살짝 줄임 */
    list-style: none;
}

.sub-menu li a {
    display: block; 
    /* 왼쪽 패딩을 48px -> 30px로 축소하여 간격 조정 */
    padding: 8px 20px 8px 30px; 
    color: #64748b; 
    text-decoration: none; 
    font-size: 14px;
    transition: all 0.2s ease;
}

/* 소메뉴 호버 스타일 */
.sub-menu li a:hover { 
    color: #1e40af; 
    background: #eff6ff; 
    /* 텍스트 언더라인은 디자인에 따라 선택 (깔끔함을 위해 제거 추천) */
    text-decoration: none; 
}


./* 화살표 기본 아이콘 (펼치기 전: 아래 방향) */
.arrow-icon {
    font-style: normal;
    font-size: 10px;
    color: #94a3b8;
    display: inline-block;
    /* 기본 상태에서 아래를 향하도록 설정 (이미 아이콘이 아래방향이 아니면 rotate(90deg) 등으로 초기값 조정 가능) */
    transition: transform 0.3s ease; 
    transform: rotate(0deg); 
}

/* 메뉴가 활성화되었을 때 (펼침 상태: 위 방향) */
.menu-group.active .arrow-icon {
    /* 180도 회전시켜서 위를 향하게 만듦 */
    transform: rotate(180deg); 
    color: #3b82f6; 
}

/* [4] 메인 콘텐츠 영역 */
.main-content { 
    flex: 1; 
    padding: 14px; 
    overflow-x: auto; 
    background: #ffffff; 
}
	


/* [1] 검색바 전체 컨테이너 (우측 정렬) */
.grid-header-actions {
    display: flex;
    
    margin-bottom: 10px;
    width: 100%;
}

.grid-search-area {
    display: flex;
    align-items: center; /* 자식 요소들의 수직 중앙 정렬 */
    gap: 8px; /* 요소들 사이의 간격 */
    flex-wrap: wrap;
}


.grid-header-actions2 {
    display: flex;
    justify-content: flex-start !important; /* 왼쪽으로 정렬 변경 */
    margin-bottom: 10px;
    width: 100%;
}

.grid-search-area2 {
    display: flex;
    align-items: center;
    gap: 8px; /* 요소들 사이의 촘촘한 간격 */
    flex-wrap: wrap;
    width: 100%; /* 전체 너비 사용 */
}

/*입고관리*/
.search-left-part { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 300px; }

.grid-search-area-inbound { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 15px; margin-bottom: 15px; }


.ft-label-final { 
    font-size: 13px; 
    color: #444; 
    font-weight: 700; /* 800에서 700으로 하향 */
    margin-bottom: 5px; 
    display: block;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.02em;
}

/* 입력창: 높이와 폰트 렌더링 최적화 */
.ft-input-final {
    height: 40px !important;
    line-height: normal; /* 패딩으로 중앙을 잡는게 덜 뭉개집니다 */
    font-size: 15px !important;
    font-weight: 700 !important;
    border: 1px solid #ced4da !important; /* 보더를 1px로 줄여서 더 날카롭게 표시 */
    border-radius: 6px !important;
    box-sizing: border-box;
}

.ft-input-final:focus {
    /* 보더 색상을 파란색으로 변경 */
    border-color: #0d6efd !important; 
    /* 배경색을 연한 파란색으로 변경 */
    background-color: #f8fbff !important; 
    
    /* [핵심] outline은 끄되, 박스 쉐도우를 미세하게 주면 
       글자가 더 또렷해 보이고 입력창이 강조됩니다. */
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
    
    /* 포커스 시 글자색을 더 진하게 하여 가독성 향상 */
    color: #000 !important;
    
    /* 렌더링 최적화 유지 */
    -webkit-font-smoothing: antialiased;
}

.ft-info-display-final {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    height: 40px;
    display: flex; /* Flex 방식이 글자 뭉개짐이 가장 적습니다 */
    align-items: center;
    padding: 0 15px;
    font-size: 15px;
    color: #1a1a1a;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* --- [변경] 부피 측정 그리드: 가로 3개씩 배치 --- */
#package_input_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 5px;
    
    /* [추가] 2줄(6개) 높이만큼 고정하고 나머지는 스크롤 */
    max-height: 190px; 
    overflow-y: auto;
    overflow-x: hidden;
    
    /* 스크롤바 디자인 (선택사항: 깔끔하게 보이게) */
    padding-right: 5px;
}

/* 스크롤바 커스텀 (크롬, 엣지용) */
#package_input_area::-webkit-scrollbar {
    width: 6px;
}
#package_input_area::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
#package_input_area::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.box-item-card {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 10px; display: flex; flex-direction: column; gap: 5px;
}
.dim-input-group { display: flex; align-items: center; gap: 4px; }
.dim-input-group input { flex: 1; min-width: 0; text-align: center; }

@media (max-width: 1200px) { #package_input_area { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { #package_input_area { grid-template-columns: 1fr; } }

/*입고관리 끝*/

/* [2] 입력 요소 공통 스타일 (날짜 & 텍스트창) */
.date-input, 
#jisa, 
.txtbox {
    height: 38px !important; /* 버튼과 동일한 높이 */
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box; /* 패딩이 높이에 영향을 주지 않도록 설정 */
    outline: none;
    vertical-align: middle;
}

/* 포커스 시 TG Blue 포인트 */
.date-input:focus, 
.txtbox:focus {
    border-color: #3b82f6;
}

/* [3] 날짜 입력 세부 스타일 */
.date-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.date-separator {
    line-height: 38px;
    height: 38px;
    display: flex;
    align-items: center;
}

/* 4. 셀렉트박스(jisa) 특화 스타일 */
#jisa {
    min-width: 100px;
    background-color: white;
    appearance: none; /* 브라우저 기본 화살표 제거(선택) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* [4] 검색 입력 그룹 세부 스타일 */
.search-group {
    display: flex;
    gap: 3px;
}

.txtbox {
    width: 220px; /* 고정 너비 지정 */
}



/* 날짜 입력창 내의 연, 월, 일 글자 숨기기 */
/* 날짜 입력창 공통 스타일 */
.date-input {
    width: 130px;
    padding: 8px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 14px;
    color: #475569;
    outline: none;
    background-color: #ffffff;
    cursor: pointer;
    text-align: center; /* 시작일 텍스트 중앙 정렬 */
    transition: border-color 0.2s;
}

/* 포커스 되었을 때(달력이 떴을 때) 스타일 */


/* 달력 아이콘이 텍스트와 겹치지 않게 하거나 숨기고 싶을 때 */
.date-input::-webkit-calendar-picker-indicator {
    margin-left: -15px;
    cursor: pointer;
}


/* 날짜가 선택되지 않았을 때(Placeholder 상태) 가이드 문구 숨기기 */
.date-input::-webkit-datetime-edit-year-field:not([aria-valuenow]),
.date-input::-webkit-datetime-edit-month-field:not([aria-valuenow]),
.date-input::-webkit-datetime-edit-day-field:not([aria-valuenow]),
.date-input::-webkit-datetime-edit-text:not([aria-valuenow]) {
    color: transparent !important;
}

/* 포커스 되었을 때 브라우저가 강제로 보여주는 회색 글자들도 투명하게 */
.date-input:focus::-webkit-datetime-edit {
    color: transparent;
}

/* 하지만 날짜를 선택해서 값이 생기면 다시 글자색을 보이게 함 */
.date-input[value]:not([value=""])::-webkit-datetime-edit,
.date-input:valid::-webkit-datetime-edit {
    color: #475569 !important;
}


select {
    padding: 0 30px 0 12px; /* 우측 커스텀 화살표 공간 */
    border: 1px solid #e2e8f0;
    color: #475569;
    background-color: #ffffff;
    outline: none;
    cursor: pointer;
	height: 40px;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease;
    
    /* 브라우저 기본 화살표 제거 및 커스텀 화살표 삽입 */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}


select:focus
{
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}


/* 엑셀 버튼: 크기 최적화 버전 */
.btn-excel {
    background-color: #1D6F42;
    border-color: #1D6F42;
    color: #ffffff;
    font-size: 13px;          /* 폰트 크기 축소 */
    font-weight: 500;
    padding: 5px 12px;       /* 상하좌우 패딩 축소 */
    border-radius: 4px;      /* 모서리 곡률 조정 */
    transition: all 0.2s;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
}

/* 배송접수 버튼 (기본 Primary 버튼 커스텀) */
.header-actions .btn-primary {
    background-color: #0D6EFD;
    border-color: #0D6EFD;
    color: #ffffff;
    font-size: 13px;          /* 폰트 크기 축소 */
    font-weight: 500;
    padding: 5px 12px;       /* 상하좌우 패딩 축소 */
    border-radius: 4px;      /* 모서리 곡률 조정 */
    transition: all 0.2s;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
}


/* 버튼 내 아이콘 간격 정밀 조정 */
.btn-excel i, 
.header-actions .btn i {
    margin-right: 6px !important; /* 아이콘과 글자 사이 간격 */
    font-size: 12px;              /* 아이콘 크기 살짝 조절 */
    vertical-align: middle;       /* 수직 정렬 맞춤 */
    position: relative;
    top: -1px;                    /* 아이콘 위치 미세 상향 조정 */
}


.header-actions {
    /* 버튼 사이의 좌우 간격만 정밀 조정 (20px 추천) */
    column-gap: 10px !important; 
}

/* 두 버튼의 텍스트가 위아래로 삐뚤어지지 않게 강제 정렬 */
.header-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px; /* 두 버튼의 높이를 강제로 고정하여 일체감을 줌 */
}


/*로그인*/
/* 로그인 전체 배경 */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* 부드러운 그라데이션 */
    padding: 20px;
}

.login-box {
    width: 100%;
    max-width: 450px;
}

/* 카드 및 입력창 디테일 */
.login-box .card {
    border-radius: 20px;
    overflow: hidden;
}

.login-box .input-group-text {
    border-color: #dee2e6;
    color: #6c757d;
}

.login-box .form-control {
    height: 50px;
    font-size: 15px;
    border-color: #dee2e6;
}

.login-box .form-control:focus {
    box-shadow: none;
    border-color: #0d6efd;
    background-color: #fff;
}

/* 버튼 효과 */
.login-box .btn-primary {
    transition: all 0.3s;
    letter-spacing: 1px;
}

.login-box .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
}

.x-small {
    font-size: 11px;
}
/*로그인 끝*/



/* [5] 블랙 검색 버튼 통합 스타일 */
/* 조회 버튼 */
.searchbtn {
    background-color: #111827;
    color: #ffffff;
    border: none;
    padding: 0 20px; /* 조금 더 여유 있게 조정 */
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 3px;
	margin-right:20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease; /* 부드러운 변화 */
}

.searchbtn:hover {
    background-color: #374151; /* 옵션 1 적용 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px); /* 살짝 떠오르는 효과 */
}

/* [5] 블랙 검색 버튼 통합 스타일 */


/* 파란색 라운딩 커스텀 버튼 스타일 */
.btnround {
    background-color: #0d6efd;
    color: #ffffff;
    border: none;
    padding: 0 10px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transition: all 0.2s ease;
}

.btnround:hover {
    background-color: #0b5ed7;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transform: translateY(-1px);
}

.btnround:active {
	background-color: #0a58ca;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transform: translateY(0);
}

.btnround i {
    font-size: 13px;
}

/*엑셀버튼*/
.excelbtn {
    background-color: #28a745; /* 엑셀 느낌의 녹색 */
    color: white;
    border: none;
    padding: 0 10px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px; /* 아이콘과 텍스트 간격 */
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transition: background-color 0.2s;
}

.excelbtn:hover {
    background-color: #218838;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
	transform: translateY(-1px);
}

.excelbtn i {
    font-size: 13px;
}
/*엑셀버튼*/


/* 송장출력 버튼 스타일 (Indigo/Blue 계열) */
.printbtn {
    /* 배경은 아주 연한 쿨 그레이로 변경 */
    background-color: #f8fafc; 
    /* 텍스트는 가독성을 위해 짙은 그레이로 변경 */
    color: #334155;
    /* 연한 그레이 버튼에는 테두리가 있어야 '비활성화' 버튼처럼 안 보입니다 */
    border: 1px solid #cbd5e1; 
    
    padding: 0 10px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /* 그림자도 파란색을 빼고 은은한 무채색으로 변경 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.printbtn:hover {
    /* 마우스 올리면 살짝 더 진해지는 느낌 */
    background-color: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}


.printinfobtn {
    background-color: #f8f9fc;
    color: #858796;
    border: 1px solid #e2e8f0; /* 미세한 테두리를 추가해 엑셀 버튼과 구분 */
    padding: 0 10px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /* 그림자를 파란색에서 부드러운 회색으로 변경 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.printinfobtn:hover {
    background-color: #f1f5f9;
    color: #4a5568;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}


/* 삭제 버튼 스타일 */
.deletebtn {
    background-color: #ef4444; /* Danger Red */
    color: white;
	border: none;
    padding: 0 10px;
    height: 38px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
	margin-left: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transition: all 0.2s ease;
}

.deletebtn:hover {
    background-color: #dc2626;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
	transform: translateY(-1px); /* 살짝 떠오르는 효과 */
}

.deletebtn i {
    font-size: 13px;
}



/* gridjs 송장번호 스타일 */
.gridjs-td a.btn-waybill-detail {
    text-decoration: underline !important;
    color: #007bff !important;
    font-size:14px;
    cursor: pointer;
}

.gridjs-td a.btn-waybill-detail:hover {
    color: #0056b3 !important;
    text-decoration: none !important; /* 마우스 올리면 밑줄 제거(선택) */
}



/* 우측 사이드 모달 스타일 */
#orderLogModal .modal-dialog {
    position: fixed;
    margin: auto;
    width: 500px; /* 사이드니까 너비는 이 정도가 적당합니다 */
    height: 100%;
    right: 0;
    top: 0;
    transform: translate3d(0%, 0, 0);
}

#orderLogModal .modal-content {
    height: 100%;
    border-radius: 0; /* 사이드는 직각이 예쁩니다 */
    border: none;
}

#orderLogModal.fade .modal-dialog {
    right: -500px;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

#orderLogModal.show .modal-dialog {
    right: 0;
}

.modal.fade.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 450px;
    height: 100%;
    right: -450px;
    top: 0;
    transition: right 0.3s ease-out;
}
.modal.show .modal-dialog {
    right: 0;
}
.modal-content { height: 100%; border-radius: 0; }
/* 우측 사이드 모달 스타일 end */


/* 주문상세 */
.label-custom { font-size: 0.7rem; font-weight: 800; color: #94a3b8; margin-bottom: 4px; text-transform: uppercase; }
.custom-input { border-radius: 6px; border: 1px solid #e2e8f0; padding: 0.55rem 0.75rem; font-size: 0.95rem; }
.custom-input:focus { border-color: #4e73df; box-shadow: 0 0 0 2px rgba(78,115,223,0.1); }
/* 헤더: 하단 선을 더 굵고 진하게 */
.custom-table thead th { 
	background-color: #f8f9fc; 
	border-bottom: 2px solid #cbd5e1; /* 더 진하게 수정 */
	font-size: 0.75rem; 
	color: #64748b; 
	padding: 12px; 
}

.custom-table tbody td { 
	border-top: 1px solid #cbd5e1; /* 더 진하게 수정 */
	font-size: 0.9rem; 
}
.card { border-radius: 12px; }
.bg-soft-danger { background-color: #fff5f5; color: #e53e3e; }
/* 주문상세 end */



/* 테이블을 감싸는 div용 스타일 */
.table-responsive-custom {
    width: 100%;
    overflow-x: auto;       /* 가로 스크롤 허용 */
    -webkit-overflow-scrolling: touch; /* 아이폰에서 부드러운 스크롤 */
    margin-bottom: 1rem;
}

/* 테이블이 너무 좁아지지 않게 최소 너비 유지 */
.table-responsive-custom table {
    min-width: 600px;       /* 모바일에서도 테이블이 유지해야 할 최소 너비 */
    width: 100%;
}

/*오른쪽 이력(로그) 슬라이드*/
/* 767px 이하 모바일에서만 강제 적용 */
@media (max-width: 767px) {
    /* 1. 슬라이드아웃 위치와 너비를 화면 0점에 강제 고정 */
    .modal.fade.right .modal-dialog.modal-dialog-slideout {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important; /* 왼쪽 0점 고정 (짤림 방지 핵심) */
        right: 0 !important;
        margin: 0 !important;
        width: 100vw !important; /* 화면 너비 100% */
        max-width: 100vw !important;
        transform: translate(0, 0) !important; /* 슬라이드 애니메이션 좌표 무시 */
    }

    /* 2. 모달 컨텐츠가 화면을 뚫고 나가지 않게 함 */
    #orderLogModal .modal-content {
        width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. 내부 여백 최적화 */
    #logModalBody {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 10px !important;
    }
}