/* =========================================================
   FreshVault Design System
   작성일 : 2026
   용도 : ERP 전체 공통 컬러 / 디자인 변수
========================================================= */

/* =========================================================
   FRESHVAULT 공통 컬러
========================================================= */
:root {
    --fv-soft-green: #eef5f1;
    --fv-soft-green-border: #dbe7e0;
    --fv-card-shadow: 0 8px 18px rgba(32, 54, 43, 0.06);
}

:root {
    --fv-line-color: #DCEBE4;      /* 테이블목록 제목 백그라운드 */
}

:root {

    /* =====================================================
       BRAND COLOR (브랜드)
    ===================================================== */

    --fv-primary: #234f3a;          /* FreshVault 메인 그린 */
    --fv-primary-hover: #183d2b;    /* 버튼 Hover */
    --fv-primary-light: #e4f0e8;    /* 연한 그린 */


    /* =====================================================
       BACKGROUND (배경)
    ===================================================== */

    --fv-bg: #f4f6f8;               /* 전체 배경 */
    --fv-card: #ffffff;             /* 카드 배경 */
    --fv-card-hover: #fafcfa;       /* 카드 Hover */

    background: #e4f0e8;  /*매장 출고 삭제 버튼 등록추가버튼 */


    /* =====================================================
       BORDER (테두리)
    ===================================================== */

    --fv-border: #dfe7e2;           /* 기본 테두리 */
    --fv-border-light: #edf2ef;     /* 아주 연한 테두리 */
    --fv-border-dark: #c7d6cc;      /* 진한 테두리 */


    /* =====================================================
       TEXT (글씨)
    ===================================================== */
    --fv-text-sub1: #122019;      /* 진함 사용자 매뉴얼 항목예시*/
    --fv-text: #24372d;             /* 제목 */
    --fv-text-body: #42564a;        /* 본문 */
    --fv-text-sub: #7b8b82;         /* 설명 */
    --fv-text-disabled: #b4bdb7;    /* 비활성 */


    /* =====================================================
       STATUS (상태)
    ===================================================== */

    --fv-success: #2e8b57;          /* 성공 */
    --fv-warning: #f6a623;          /* 경고 */
    --fv-danger: #d9534f;           /* 삭제 */
    --fv-info: #4b84d6;             /* 정보 */


    /* =====================================================
       SHADOW (그림자)
    ===================================================== */

    --fv-shadow-light:
            0 2px 8px rgba(0,0,0,.04);

    --fv-shadow-card:
            0 8px 24px rgba(0,0,0,.06);


    /* =====================================================
       RADIUS (둥근 정도)
    ===================================================== */

    --fv-radius-sm: 8px;
    --fv-radius-md: 12px;
    --fv-radius-lg: 16px;


    /* =====================================================
       FONT (글꼴)
    ===================================================== */

    --fv-font:
            "Pretendard",
            "Malgun Gothic",
            Arial,
            sans-serif;
}




/* =========================================================
   FRESHVAULT STANDARD
   테이블 상세보기 버튼
========================================================= */

.fv-table-view-btn {
    width: 52px;
    height: 30px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    background: #e4f0e8;

    border: 1px solid #c7d5cc;
    border-radius: 6px;

    color: #34483e;

    font-size: 11px;
    font-weight: 650;

    white-space: nowrap;
    cursor: pointer;

    transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease,
            box-shadow 0.18s ease,
            transform 0.18s ease;
}


/* =========================================================
   FRESHVAULT STANDARD
   테이블 상세보기 버튼 HOVER
========================================================= */

.fv-table-view-btn:hover {
    background: #dce9e1;

    border-color: #315b46;

    color: #244c3a;

    box-shadow: 0 2px 6px rgba(36, 76, 58, 0.14);

    transform: translateY(-1px);
}






body {
    margin: 0;
    font-family: Arial;
    background: #f4f6f8;
}

/* ERP 전체 화면은 브라우저 스크롤 금지 */
.layout {
    height: 100vh;
    overflow: hidden;
}


.login-version {
    margin: 12px 0 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #6b7d72;
    letter-spacing: 1px;
}


.sidebar {
    width: 220px;
    background: #123d34;
    color: white;
    padding: 25px;
    overflow-y: auto;

    display: flex; /* 메뉴와 로그아웃을 위/아래로 배치 */
    flex-direction: column; /* 세로 방향 */
    box-sizing: border-box; /* padding 때문에 폭이 찌그러지는 것 방지 */
}

.logo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 35px;
}

.menu {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 400;


}

/* ===== 대메뉴 마우스 오버 효과 ===== */
.menu:hover {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}


/* 오른쪽 메인 영역 */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;

    height: 100vh;
    min-height: 0;
    box-sizing: border-box;

    padding: 30px 0 30px 30px;
    overflow: hidden;
}

/* 실제 내용 영역만 스크롤 */
.main-scroll {
    flex: 1;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    /* 콘텐츠와 스크롤바 사이 간격 */
    padding-right: 14px;
    box-sizing: border-box;
}



/* =====================================================================
   ERP 공통 검색 컨트롤

   설명 :
   - 여러 ERP 페이지에서 검색창, 선택창, 검색 버튼,
     전체보기 버튼을 동일한 디자인으로 사용한다.
   - 새 페이지를 만들 때 아래 클래스를 재사용한다.
===================================================================== */

/* 검색 입력창 및 선택창 공통 */
.erp-search-control {
    height: 30px;

    padding: 0 11px;

    box-sizing: border-box;

    color: #263b30;

    font-size: 14px;
    font-weight: 600;

    background: #ffffff;

    border: 1px solid #d6e2da;
    border-radius: 7px;

}


/* 입력창 안내 문구 */
.erp-search-control::placeholder {
    color: #7b8981;

    font-size: 12px;
    font-weight: 500;
}


/* 입력창 및 선택창 포커스 */
.erp-search-control:focus {
    border-color: #9fc4ae;

    box-shadow:
            0 0 0 3px rgba(203, 226, 212, 0.28);
}

/* 공통 검색 버튼 */
.erp-search-button {
    height: 32px;
    padding: 0 23px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    background: #2f6b4e;

    border: 1px solid #84ba9c;
    border-radius: 7px;
    outline: none;

    box-shadow:  0 4px 10px rgba(24,59,41,.18);
    cursor: pointer;
}


/* 공통 전체보기 버튼 */
.erp-reset-button {
    height: 30px;

    padding: 0 15px;

    color: #2f6549;

    font-size: 11px;
    font-weight: 800;

    background: #d2e6d9;

    border: none;
    border-radius: 7px;

    box-shadow: 0 3px 8px rgba(24, 59, 41, 0.10);

    cursor: pointer;
}


/* 버튼 마우스 반응 */
.erp-search-button:hover,
.erp-reset-button:hover {
    transform: translateY(-1px);

    box-shadow: 0 6px 14px rgba(24, 59, 41, 0.18);
}


/* 검색 버튼 Hover */
.erp-search-button:hover {
    color: #ffffff;

    background: #245b40;

    transform: translateY(-1px);

    box-shadow: 0 6px 14px rgba(24, 59, 41, 0.22);

    border: 1px solid #b6d8c2;
}



/* 검색 버튼 클릭 */
.erp-search-button:active {
    color: #ffffff;

    background: #1f4f38;

    border-color: #1f4f38;

    transform: translateY(0);
}

.erp-reset-button:hover {
    background: #cfe4d7;
}




/* =====================================================
   COMMAND CENTER 화면에서만 스크롤 숨김
===================================================== */
.main-scroll.command-no-scroll {
    overflow-y: hidden;
    padding-right: 18px;

}


.header {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 25px;
}

.sub {
    color: #666;
    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 500;
}

/* ===== 서브메뉴 마우스 오버 효과 ===== */
.submenu:hover {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.grid {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 16px;
}

/* 지역별 매장 검색 */
.region-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 20px;
}

/* =====================================================
   지역별 매장 검색
   왼쪽 지도 / 오른쪽 카드 3열
===================================================== */

.region-status-layout {
    display: grid;

    /* 왼쪽 지도 약 40% / 오른쪽 카드 약 60% */
    grid-template-columns:
        minmax(360px, 0.9fr)
        minmax(0, 1.35fr);

    gap: 24px;
    width: 100%;
    align-items: start;
}


/* 왼쪽 지도 영역 */
.region-status-map-area {
    min-width: 0;
    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* 왼쪽 SVG 지도 */
.region-status-map-object {
    display: block;

    width: 115%;
    height: 520px;

    border: none;
    transform: translateY(70px);
}


/* 오른쪽 카드 영역 */
.region-status-card-area {
    min-width: 0;

    /* 첫 번째 카드 Hover 테두리·그림자가 잘리지 않도록 여유 공간 */
    padding-top: 8px;
    box-sizing: border-box;
}


/* 지역별 카드만 3열 */
.region-status-card-grid {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 20px !important;
    width: 100%;
}


.card {
    background: white;
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.title {
    font-size: 16px;
    color: #555;
    margin-bottom: 12px;
}


/* 나중에 지도·목록·알림이 들어갈 영역 */
.command-third-body {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 290px;

    color: #9aa39f;
    font-size: 13px;
}

/* =====================================================
지역별 운영 현황 카드 Hover 효과
===================================================== */

.region-grid .card {
    transition: all 0.25s ease;
    border: 1px solid #e5e7eb;
    cursor: pointer;
}

.region-grid .card .title {
    transition: all 0.25s ease;
}

.region-grid .card:hover {
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #f4faf6 100%
    );

    border-color: #2f6b4f;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

    transform: translateY(-3px);
}

.region-grid .card:hover .title {
    color: #1f5d42;
    font-weight: 700;
}


/* 지도 지역 Hover 시 연결된 카드 강조 */
.region-grid .card.map-region-hover {
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #f4faf6 100%
    );

    border-color: #2f6b4f;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

/* 지도 Hover 시 카드 지역명도 기존 Hover처럼 강조 */
.region-grid .card.map-region-hover .title {
    color: #1f5d42;
    font-weight: 700;
}


.value {
    font-size: 26px;
    font-weight: bold;
}

/* =====================================================
지역별 운영 현황 카드 숫자 스타일
===================================================== */
.region-grid .value {
    font-size: 16px;
    font-weight: 600;
    color: #1f5d42;
}

.ok {
    color: #168a4a;
}

.warn {
    color: #d98200;
}

.top-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;

    background: transparent;
    padding-top: 10px;

    flex-shrink: 0;
}

.datetime {
    font-size: 14px;
    font-weight: bold;
    color: white;
    background: #2a6b58;
    padding: 8px 18px;
    border-radius: 10px;
    margin-right: 30px;
    margin-top: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.store-count {
    background: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: normal;
}

.store-count span {
    color: #0f4d3c;
    font-size: 32px;
    font-weight: bold;
}

.store-count span {
    color: #0f4d3c;
    font-size: 32px;
    font-weight: bold;
}

/* 여기부터 추가 */

.section-title {
    margin-top: 90px;
    margin-bottom: 15px;
    font-size: 15px;
    font-weight: bold;
}

.table-box {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 14px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

th {
    background: #f5f7f8;
    font-weight: bold;
}

button {
    background: #0f4d3c;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
}

button:hover {
    background: #0b3a2d;
}

.store-count-box {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    align-items: center;
    background: #ffffff;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
}

#storeCount {
    color: #0f4d3c;
    font-size: 28px;
}

/* 여기까지 추가 */
.submenu-area {
    display: none;
}

.submenu {
    padding: 10px 30px;
    color: #d0d0d0;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

.submenu:hover {
    background: rgba(255, 255, 255, 0.1);
}

.submenu.active {
    background: rgba(255, 255, 255, 0.10);
    color: white;
    font-weight: 600;
    border-radius: 6px;
}

.menu {
    cursor: pointer;
}

.form-box {
    background: white;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    max-width: 1500px;
}

.form-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 18px 30px;
}

.form-item p {
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 500;
    color: #666;
}

.form-item input,
.form-item select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.form-full {
    grid-column: 1 / 3;
}

.form-button {
    margin-top: 25px;
    text-align: right;
}

.button-area {
    margin-top: 25px;
    text-align: center;
}

/*매장등록버튼디자인*/
.button-area button {
    padding: 14px 40px;
    border: none;
    border-radius: 8px;
    background: #0f4d3c;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.form-item p {
    font-size: 15px;
    font-weight: 600;
}

.logo {
    text-align: center;
    padding: 15px 10px 5px 10px;
    margin-top: -20px;
}

.logo-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: contain;
}

.logo-text {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin-top: -10px;
    letter-spacing: 0.5px;
}

.store-label {
    font-size: 18px;
    color: #333;
    font-weight: 600;
}

#storeCount {
    font-size: 32px;
    font-weight: 700;
    color: #0f4d3c;
}

.unit {
    font-size: 16px;
    color: #666;
    margin-left: 2px;
}

.login-page {
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #0f2d23, #1d5c48);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 420px;
    background: white;
    border-radius: 25px;
    padding: 50px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.login-logo {
    width: 110px;
    margin-bottom: 25px;
}

.login-card h1 {
    font-size: 32px;
    color: #124734;
}

.login-sub {
    color: #777;
    margin-bottom: 30px;
}

.login-card input {
    width: 100%;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-size: 16px;
}

.remember {
    display: flex;
    justify-content: flex-end; /* 오른쪽 정렬 */
    align-items: center;
    gap: 8px;

    margin-top: 15px;
    margin-bottom: 20px;

    font-size: 14px;
    color: #666;
}

.remember input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.login-btn {
    width: 100%;
    padding: 16px;
    margin-top: 20px;
    background: #124734;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
}

.security {
    margin-top: 20px;
    color: #888;
    font-size: 13px;
}

.logout-menu {
    margin-top: auto; /* 로그아웃을 항상 왼쪽 메뉴 하단에 고정 */
    height: 42px; /* 버튼 높이 고정 */
    min-height: 42px; /* 찌그러짐 방지 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout-menu:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.logout-menu i {
    width: 18px;
    text-align: center;
}

.logout-menu:hover {
    background: rgba(255, 255, 255, 0.15);
}

.logout-menu i {
    width: 18px;
    text-align: center;
}

.sidebar {
    width: 300px;
    min-width: 300px;
    min-height: 100vh;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    /* 왼쪽 초록색 메뉴 화면에 고정 */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;

}

.menu-group {
    flex: 0;
}

.chart-box {
    background: white;
    margin-top: 0px;
    padding: 25px;
    height: 280px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.network-box {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    height: 280px;
}

.section-title {
    font-size: 17px;
    font-weight: 500;
    color: #1E2B23;
    text-align: center;
    margin: 0 0 20px 0;
}

.chart-box h3 {
    font-size: 17px;
    font-weight: 500;
    color: #1E2B23;
    text-align: center;
    margin: 0 0 20px 0;
}

.bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

#orderTimeChart {
    width: 100% !important;
    height: 240px !important;
}

.section-title {
    font-size: 17px;
    font-weight: 500;
    color: #1E2B23;
    text-align: center;
    margin: 0 0 20px 0;
}

.status-row {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 15px;
}

.green {
    color: #2E8B57;
    font-weight: 700;
}

.blue {
    color: #3B82F6;
    font-weight: 700;
}

.red {
    color: #EF4444;
    font-weight: 700;
}

/* =====================================================
   매장 장비 현황 카드형 목록
===================================================== */
.equipment-card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 1500px
}

.equipment-card {
    background: white;
    border-radius: 14px;
    padding: 18px 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.equipment-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.equipment-card-title {
    font-weight: 700;
    font-size: 15px;
}

.equipment-card-info {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 20px;
    font-size: 13px;
    color: #333;
}

/* =====================================================
   매장 장비 현황 카드
   - 왼쪽: 장비 정보
   - 오른쪽: 버튼
===================================================== */
.equipment-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 오른쪽 버튼 영역 */
.equipment-card-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 상세보기 / 수정하기 버튼 */
.equipment-action-btn {
    width: 95px;
    height: 34px;
    background: #ffffff;
    color: #14532d;
    border: 1px solid #14532d;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

/* 버튼에 마우스 올렸을 때 */
.equipment-action-btn:hover {
    background: #14532d;
    color: #ffffff;
}

/* =====================================================
   매장 장비 현황 카드 내부 정렬
   - 장비 정보가 왼쪽에 몰리지 않도록 3열로 배치
   - 오른쪽 버튼 영역은 고정
===================================================== */
.equipment-card-info {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 40px;
    padding-right: 40px;
}


/* =====================================================
   매장 장비 현황 카드
   - 위 검색 박스(form-box)와 동일한 크기/느낌
===================================================== */
.equipment-card {
    background: white;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    max-width: 1500px;

    box-sizing: border-box;
}


/* 장비 검색박스 테두리 음영 */
.equipment-search-box {
    border: 1px solid #b8cfc2;
    box-shadow: 0 0 0 4px rgba(184, 207, 194, 0.15);
}

/* === 지점 검색 박스 테두리음영 == */
.store-search-box {
    border: 1px solid #b8cfc2;
    box-shadow: 0 0 0 2px rgba(184, 207, 194, 0.15);
}

.back-button {
    display: inline-block;
    margin-bottom: 20px;
    color: #2f5e46;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-button:hover {
    color: #1f3f2f;
    transform: translateX(-3px);
}

/* 매장 상세 모달 배경 */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* 매장 상세 모달 박스 */
.modal-box {
    width: 700px;
    min-height: 450px;
    background: #fff;
    border-radius: 14px;
    padding: 24px;

    display: flex;
    flex-direction: column;
}

.modal-content {
    flex: 1;
}

/* 모달 상단 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 닫기 버튼 */
.modal-close-btn {
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
}

.modal-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;

    display: flex;
    gap: 8px;
}

.detail-section {
    margin-top: 18px;
}

.detail-section h4 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #183f33;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.detail-grid div {
    background: #f8faf9;
    border: 1px solid #e3e8e5;
    border-radius: 10px;
    padding: 12px 14px;
}

.detail-grid span {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 5px;
}

.detail-grid strong {
    font-size: 14px;
    color: #555;
    font-weight: 400;
}


.delete-btn {
    margin-right: auto;
    background: #d6e8db;
    color: #3f5d49;
    font-weight: 600;
    border: 1px solid #d6e2d8;
}

.delete-btn:hover {
    background: #e5efe8;
}

/* ==========================================================
   계약 만료 확인 모달
   - 매장 상세정보 위에 표시되는 확인창
   ========================================================== */

/* 화면 전체를 덮는 반투명 배경 */
.confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.45);

    display: none;

    justify-content: center;
    align-items: center;

    z-index: 9999;
}

.confirm-box {
    width: 360px;
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 30px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

.confirm-box h3 {
    margin: 0 0 14px 0;
    font-size: 20px;
    color: #183f33;
}

.confirm-box p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* 버튼 영역 */
.confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* 취소 버튼 */
.confirm-footer .mini-btn {
    background: #eef2ef;
    color: #55665d;
    border: 1px solid #d7e1da;

    transition: all .2s ease;
}

/* 계약 만료 처리 버튼 */
.confirm-footer .confirm-btn {
    background: #1d5b47;
    color: #ffffff;
    border: 1px solid #1d5b47;

    transition: all .2s ease;
}

/* =========================
   취소 버튼 Hover
   ========================= */

.confirm-footer .mini-btn:hover {

    background: #1d5b47;
    color: #ffffff;
    border-color: #1d5b47;

}

/* 계약 만료 처리 버튼 Hover */

.confirm-footer .confirm-btn:hover {

    background: #154636;
    border-color: #154636;

}

/* 안내 문구 */

.confirm-guide {

    margin-top: 18px;

    color: #666;

    font-size: 13px;

    line-height: 1.7;

}

.confirm-guide strong {

    color: #184f3d;

    font-weight: 600;

}

/* =====================================================
   지점 검색 버튼 영역
   - 기존 button-area와 충돌 방지
===================================================== */
.store-search-button-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 15px;
}

/* 검색 버튼 */
.fv-btn-primary {
    height: 34px;
    min-width: 86px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #184f3d;
    color: #ffffff;

    border: 1px solid #184f3d;
    border-radius: 7px;

    font-size: 15px;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;
}

/* 검색 버튼 hover */
.fv-btn-primary:hover {
    background: #123d30;
    border-color: #123d30;
    color: #ffffff;
}

/* 초기화 버튼 */
.fv-btn-soft {
    height: 34px;
    min-width: 86px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #edf4ef;
    color: #3f5d49;

    border: 1px solid #d6e2d8;
    border-radius: 7px;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;
}

/* 초기화 버튼 hover */
.fv-btn-soft:hover {
    background: #dfeee3;
    color: #184f3d;
    border-color: #c8ddcf;
}


.store-detail-footer {
    justify-content: space-between;
    align-items: center;
}

.left-action-buttons,
.right-action-buttons {
    display: flex;
    gap: 8px;
}

/* ===================================================
   매장 등록 버튼 영역
=================================================== */
.store-register-button-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 15px;
}


/* =====================================================
   매장별 판매 현황 상단 제목 + 매장 정보
   제목 아래로 매장 정보를 배치
===================================================== */

/* 전 페이지 공통 제목 헤더 */
.page-header {
    display: flex;
    align-items: center;
    gap: 18px;

    height: 42px; /* 페이지 바뀔 때 출렁임 방지 */
    margin-bottom: 12px;
    margin-top: 19px;
}

/* 왼쪽 녹색 막대 */
.page-header-bar {
    width: 5px;
    height: 44px; /* 너무 길지 않게 */
    border-radius: 4px;
    background: linear-gradient(to bottom, #3AA66A, #1F6B52);
    flex-shrink: 0;
    margin-top: -24px; /* 위로 8px 이동 */
}

/* 제목 + 부제목 */
.page-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 제목 */
#pageTitle {
    margin: 0;
    padding: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;

    display: flex;
    align-items: center;
    gap: 12px;
}

/* 부제목 */
#pageSub {
    margin-top: 6px;
    padding: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.2;
}


/* =====================================================
   매장 판매 상세 KPI
===================================================== */

.revenue-kpi-section {
    margin-top: 30px;
}

/* 기간 버튼 */
.revenue-period-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.mini-btn {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;
    background: #244537;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.mini-btn:hover {
    background: #35614e;
}

/* KPI 카드 */
.revenue-kpi-grid {

    display: grid;

    grid-template-columns:repeat(6, 1fr);

    gap: 18px;

}

/* 카드 */
.revenue-kpi-card {

    background: #ffffff;

    border: 1px solid #E6E6E6;

    border-radius: 12px;

    padding: 18px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    transition: 0.2s;

}

.revenue-kpi-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);

}

.revenue-kpi-card p {

    margin: 0;

    color: #888;

    font-size: 15px;

}

/* 매장별 판매 상세 - KPI 숫자만 강조 */
.revenue-kpi-card p.kpi-value {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #184B3A !important;
    margin-top: 6px;
}


.revenue-kpi-card h3 {

    margin-top: 17px;

    font-size: 20px;

    font-weight: 500;

    color: #1f2d3d;

}


/* =====================================================
   매장별 판매 상세 그래프 영역
   - KPI 카드 6칸 기준으로 그래프 3개를 2칸씩 배치
===================================================== */

.revenue-chart-section {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 18px;
    margin-top: 24px;
}

/* 그래프 카드 하나가 2칸 차지 */
.revenue-chart-card {
    grid-column: span 2;
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 그래프 카드 제목 */
.chart-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-title-row h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #1f2d3d;
}

.chart-title-row span {
    font-size: 12px;
    color: #999;
}

/* 실제 그래프 들어갈 자리 */
.chart-placeholder {
    height: 220px;
    border: 1px dashed #D8D8D8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
    background: #FAFAFA;
}


/* =====================================================
   월별 매출 현황 데이터 표
===================================================== */


.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title-row h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.section-title-row span {
    font-size: 12px;
    color: #999;
}


.monthly-sales-table th {
    text-align: left;
    padding: 12px;
    background: #F7F7F7;
    border-bottom: 1px solid #E6E6E6;
    font-weight: 500;
}

.monthly-sales-table td {
    padding: 12px;
    border-bottom: 1px solid #EEEEEE;
}

.monthly-sales-table tbody tr:hover {
    background: #FAFAFA;
}


/* =====================================================
   월별 매출 요약 테이블
===================================================== */

.revenue-month-table-section {
    margin-top: 24px;
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.revenue-month-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.revenue-month-table th {
    text-align: left;
    padding: 12px;
    background: #F7F7F7;
    border-bottom: 1px solid #E6E6E6;
    font-weight: 400;
}

.revenue-month-table td {
    padding: 12px;
    border-bottom: 1px solid #EEEEEE;
}

.revenue-month-table tbody tr:hover {
    background: #FAFAFA;
}

/* =====================================================
   매장별 판매 상세 하단 요약 3칸 영역
   - 그래프 3개와 같은 폭 구조
===================================================== */
.revenue-summary-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.revenue-summary-card {
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* 월별 테이블이 카드 안에서 또 박스처럼 보이지 않게 정리 */
.revenue-summary-card .revenue-month-table-section {
    margin-top: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.empty-card {
    color: #aaa;
    font-size: 13px;
}


/* 보기 버튼*/

.view-btn {
    padding: 7px 16px;
    border: none;
    border-radius: 6px;

    background: #244537; /* FreshVault 다크그린 */
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    transition: all .2s ease;
}

.view-btn:hover {
    background: #35614e;
}


/* 월별 매출 현황 카드 자체는 고정 */
.revenue-month-table-section {
    padding: 14px;
    overflow: hidden;
}

/* 표 기본 */
.revenue-month-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 헤더와 본문을 분리 */
.revenue-month-table thead,
.revenue-month-table tbody {
    display: block;
}

/* 헤더는 고정 */
.revenue-month-table thead {
    width: 100%;
}

/* 데이터 부분만 스크롤 */
.revenue-month-table tbody {
    height: 150px;
    overflow-y: auto;
    width: 100%;
}

/* 행 정렬 유지 */
.revenue-month-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* 줄 높이 */
.revenue-month-table th,
.revenue-month-table td {
    padding: 8px 10px;
    text-align: left;
}

/* TEST 판매 DATA 관리 - 목록 박스 위 여백 */
.test-sale-list-box {
    margin-top: 32px;
}


/* 판매 DATA 관리 테스트 페이지 */
.test-sale-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #4b5563;
    letter-spacing: -0.2px;
}


/* =====================================================
   TEST 판매 DATA 관리 - 판매 데이터 목록 테이블
   - 판매일자 / 매장명 / 상품명 / 수량 / 판매금액 글씨 조정
===================================================== */

.test-sale-table {
    width: 100%;
    border-collapse: collapse;
}

.test-sale-table th {
    text-align: left;
    padding: 12px;
    background: #f7f7f7;
    border-bottom: 1px solid #e6e6e6;
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
}

.test-sale-table td {
    padding: 12px;
    border-bottom: 1px solid #eeeeee;
    font-size: 13px;
    color: #555;
}


/* TEST 판매 DATA 관리 - 입력폼 4칸 구조 */
.test-sale-form-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 18px 22px;
}

/*매장별 총매풀액*/

.kpi-value {
    font-size: 25px;
    font-weight: 800;
    color: #111;
}


.simple-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.simple-bar {
    width: 100%;
    max-width: 34px;
    min-height: 4px;
    background: #2f5f4f;
    border-radius: 8px 8px 3px 3px;
}

.simple-bar-label {
    margin-top: 8px;
    font-size: 11px;
    color: #777;
}

.simple-bar-value {
    margin-bottom: 6px;
    font-size: 11px;
    color: #333;
    font-weight: 700;
}

/* =========================================
   매장별 판매 상세 - 월별 매출 그래프
   HTML 구조 변경 없이 안전하게 적용
========================================= */

.monthly-bar-chart {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 26px 14px 14px 42px;
    box-sizing: border-box;
    position: relative;

    background: linear-gradient(to top, #eeeeee 1px, transparent 1px) 0 26px / 100% 40px,
    linear-gradient(to top, #fafafa, #ffffff);
}

/* 왼쪽 금액 눈금 */
.monthly-bar-chart::before {
    content: "140만원\A 70만원\A 0원";
    white-space: pre;
    position: absolute;
    left: 6px;
    top: 22px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    color: #8a8f98;
    line-height: 1;
}

/* 70만원 기준선 */
.monthly-bar-chart::after {
    content: "";
    position: absolute;
    left: 42px;
    right: 14px;
    bottom: 74px;
    border-top: 1px dashed rgba(47, 95, 79, 0.35);
}

.monthly-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    /* 툴팁이 막대 밖으로 자유롭게 나오도록 */
    overflow: visible;
    z-index: 1;
}

.monthly-bar-value {
    min-height: 18px;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #1f2933;
    text-align: center;
    line-height: 1.1;
}

.monthly-bar {
    width: 16px;
    background: linear-gradient(to top, #174c3c, #3f8f70);
    border-radius: 9px 9px 3px 3px;
    box-shadow: 0 4px 10px rgba(31, 79, 63, 0.22);
}

.monthly-bar.empty {
    height: 3px !important;
    background: #e5e7eb;
    box-shadow: none;
}

.monthly-bar-label {
    /* ===========================
      월(1월~12월) 글자를 아래로 이동
      값이 클수록 더 아래로 내려감
      =========================== */

    margin-top: 10px;
    font-size: 10px;
    color: #1f2933;
}

.chart-placeholder {
    position: relative;
}

.chart-guide-line {
    position: absolute;
    left: 40px;
    right: 30px;
    top: 55%;
    border-top: 1px dashed #cfd6d2;
    z-index: 0;
}

/* =========================================================
   공통 그래프 박스 엔진 1.0
   - 월별 / 일별 / 연별 그래프가 같은 칸을 쓰도록 기준 통일
   - chart-placeholder는 공통 박스
   - chart-y-axis는 왼쪽 금액 기준
   - chart-grid는 기준선
   - simple-bar-chart는 실제 막대 + 1~12월 라벨 영역
========================================================= */

/* 실제 그래프가 들어가는 공통 영역 */
.chart-placeholder {
    position: relative;

    height: 220px;

    border: 1px dashed #D8D8D8;
    border-radius: 10px;

    background: #FAFAFA;

    overflow: visible;
}

/* 왼쪽 금액 기준선 */
.chart-y-axis {
    position: absolute;
    top: 20px;
    left: 15px;
    bottom: 35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    font-size: 11px;
    color: #1f2933;
    z-index: 2;
}

/* 가로 기준선 */
.chart-grid {
    position: absolute;
    top: 20px;
    left: 70px;
    right: 20px;
    bottom: 35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    pointer-events: none;
    z-index: 1;
}

.chart-grid div {
    border-top: 1px dashed #d9d9d9;
}

/* =========================================================
   월별 그래프 - 막대와 1월~12월 라벨 배치
   - left: 70px  → 왼쪽 금액 기준선 공간 확보
   - right: 35px → 12월이 오른쪽에서 잘리지 않게 여유 확보
   - gap: 6px    → 월 사이 간격. 숫자가 클수록 넓어지고, 작을수록 12개월이 잘 들어감
========================================================= */
.simple-bar-chart {
    position: absolute;
    left: 70px;
    right: 35px;
    top: 20px;
    bottom: 20px;

    display: flex;
    align-items: flex-end;
    overflow: visible;
    gap: 6px;

    z-index: 2;
    box-sizing: border-box;
}

/* =========================================================
   월별 그래프 - 월 라벨 정리
   - 1월~12월을 막대 아래로 조금 내림
   - 10월, 11월, 12월이 두 줄로 깨지지 않게 고정
========================================================= */


.monthly-bar-label {
    margin-top: 10px;
    font-size: 11px;
    color: #777;
    white-space: nowrap;
    text-align: center;
}

/* =========================================================
   월별 막대 높이 강제 해제
   - 이전 CSS에 height/max-height가 남아 있으면
     JS에서 계산한 높이를 덮어써서 막대가 같은 높이로 멈춤
   - 이 코드는 맨 아래에 둬서 기존 CSS보다 우선 적용
========================================================= */
.monthly-bar {
    max-height: none !important;
}

.monthly-bar-item {
    max-height: none !important;
}

/* =========================================================
   월별 그래프 툴팁
   - 막대 위쪽으로 뜨면 그래프 상단 공간을 침범함
   - 그래서 막대 칸의 가운데에 작게 표시
   - 평소에는 숨기고, 마우스를 올릴 때만 표시
========================================================= */
.monthly-bar-tooltip {
    position: absolute;

    /* 막대 칸의 가운데 위치 */
    top: 50%;
    left: 50%;

    /* 정확히 중앙 정렬 */
    transform: translate(-50%, -50%);

    padding: 5px 8px;
    background: #1f2933;
    color: #ffffff;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

/* =========================================================
   월별 그래프 툴팁 표시
   - 막대 칸에 마우스를 올리면 금액 표시
========================================================= */
.monthly-bar-item:hover .monthly-bar-tooltip {
    opacity: 1;
}

/* =========================================================
   월별 그래프 툴팁 겹침 해결
   - 마우스를 올린 막대 칸을 가장 앞으로 올림
   - 옆 막대가 툴팁을 덮지 못하게 함
========================================================= */
.monthly-bar-item:hover {
    z-index: 9999;
}

/* =====================================================
   일별 그래프 날짜(1~31일) 위치 조정
   - 그래프 안쪽으로 조금 올림
===================================================== */


.daily-bar-label {
    /* ===========================
      월(1월~12월) 글자를 아래로 이동
      값이 클수록 더 아래로 내려감
      =========================== */

    margin-top: 10px;
    font-size: 10px;
    color: #1f2933;
}

/* 일별 그래프 전체 막대 영역 */
.daily-bar-item {
    position: relative;
    overflow: visible;
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    /* 31개가 들어가야 하므로 최소 폭 제거 */
    min-width: 0;
}

/* 일별 막대 */
.daily-bar {
    width: 8px; /* 월별보다 얇게 */
    min-height: 3px;
    background: #16846f;
    border-radius: 6px 6px 3px 3px;
}


/* =========================================================
   dlf별 그래프 - 월 라벨 정리
   - 1 30일을 막대 아래로 조금 내림
   - 1일, 11일, 30일 두 줄로 깨지지 않게 고정
========================================================= */


.daily-bar-label {
    margin-top: 4px;
    font-size: 9px;
    color: #777;
    white-space: nowrap;
    text-align: center;
}

/* =========================================================
   일별 그래프 툴팁
   - 막대 위쪽으로 뜨면 그래프 상단 공간을 침범함
   - 그래서 막대 칸의 가운데에 작게 표시
   - 평소에는 숨기고, 마우스를 올릴 때만 표시
========================================================= */
.daily-bar-tooltip {
    position: absolute;

    /* 막대 칸의 가운데 위치 */
    top: 50%;
    left: 50%;

    /* 정확히 중앙 정렬 */
    transform: translate(-50%, -50%);

    padding: 5px 8px;
    background: #1f2933;
    color: #ffffff;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    z-index: 999;
}


/* =========================================================
   일별 그래프 툴팁 표시
   - 막대 칸에 마우스를 올리면 금액 표시
========================================================= */
.daily-bar-item:hover .daily-bar-tooltip {
    opacity: 1;
}


/* =========================================================
   일별 그래프 툴팁 겹침 해결
   - 마우스를 올린 막대 칸을 가장 앞으로 올림
   - 옆 막대가 툴팁을 덮지 못하게 함
========================================================= */
.daily-bar-item:hover {
    z-index: 9999;
}


/* 일별 0원 막대는 보이지 않게 */
.daily-bar.empty {
    height: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}

/* =========================================================
   일별 그래프 전용 보정
   - 일별은 1일~31일까지 많기 때문에 월별보다 좁게 표시
   - #dailyRevenueChart 안에서만 적용되므로 월별 그래프에는 영향 없음
========================================================= */

/* 일별 그래프 전체 영역 */
#dailyRevenueChart {
    gap: 2px; /* 날짜 사이 간격 축소 */
    justify-content: flex-start;
}

/* 일별 그래프 한 칸 */
#dailyRevenueChart .monthly-bar-item {
    flex: 0 0 12px; /* 31일이 한 줄에 들어가도록 칸 폭 고정 */
}

/* 일별 막대만 얇게 */
#dailyRevenueChart .monthly-bar {
    width: 6px; /* 월별 16px보다 얇게 */
}

/* 일별 0원 막대는 선처럼 보이지 않게 숨김 */
#dailyRevenueChart .monthly-bar.empty {
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 일별 날짜 숫자 */
#dailyRevenueChart .monthly-bar-label {
    font-size: 9px;
    margin-top: 4px;
}


/* 월 목록 스크롤 영역 */
.monthly-dropdown-scroll {
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 4px 8px 8px;
}

/* 월 선택 버튼 */
.monthly-option {
    width: 100%;
    height: 32px;
    border: none;
    background: transparent;
    text-align: left;
    padding: 10px 8px;
    border-radius: 10px;
    font-size: 13px;
    color: #1f2933;
    cursor: pointer;
}

/* 마우스를 올렸을 때 */
.monthly-option:hover {
    background: #eef7f3;
    color: #0f513f;
    font-weight: 700;
}


/* 조회 버튼 줄을 기준점으로 만든다 */
.revenue-period-row {
    position: relative;
}

/* 월별 선택 패널 - 카드 위에 뜨는 고급 팝업 느낌 */
.monthly-dropdown-panel {
    position: absolute;
    top: 48px;
    left: 0;
    width: 130px;
    max-height: 230px;
    z-index: 9999;

    background: #f7fbf8; /* 완전 흰색 대신 연한 그린톤 */
    border: 1px solid #b9d2c6; /* 은은한 그린 테두리 */
    border-radius: 16px;

    box-shadow: 0 10px 28px rgba(15, 81, 63, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.06);

    padding: 10px 6px 10px 10px;
}

/* 일별 D 버튼으로 달력만 띄우기 위한 숨김 날짜 입력창 */
.daily-hidden-date {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    border: none;
}


/* 연도별 선택 패널: 화면을 밀지 않고 위에 뜨게 함 */
.yearly-dropdown-panel {
    position: absolute;
    top: 48px;
    left: 130px; /* 년도별 Y 버튼 아래 위치 */
    width: 120px;
    max-height: 270px;
    z-index: 9999;

    background: #f7fbf8;
    border: 1px solid #b9d2c6;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 81, 63, 0.16);
    padding: 10px 6px 10px 10px;
}

/* 연도 목록은 세로로 쌓이게 */
.yearly-dropdown-scroll {
    max-height: 230px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 연도 버튼 */
.yearly-option {
    width: 100%;
    height: 42px;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2933;
    cursor: pointer;
}

.yearly-option:hover {
    background: #e6f3ed;
    color: #0f513f;
    font-weight: 700;
}

/* =====================================================
   기간별 조회 패널
   - 시작일 / 종료일 / 조회 버튼
===================================================== */
/* =====================================================
   매장별 판매 현황 - 기간별 조회 패널
   - 버튼 줄을 밀지 않고 아래에 떠 있게 표시
===================================================== */
.period-search-panel {
    position: absolute;
    top: 52px;
    left: 300px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 12px;
    background: #f5faf7;

    border: 1px solid #d9e9df;
    border-radius: 14px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
    z-index: 100;
}

.period-search-panel input {
    height: 34px;
    border: 1px solid #d6e3dc;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 13px;
}

.period-wave {
    color: #6b7280;
    font-weight: 700;
}

.period-search-btn {
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: #244537;
    color: #fff;
    cursor: pointer;
}

.period-search-panel input[type="date"] {
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    padding: 6px 10px;
}


/* =====================================================
   매장별 판매 현황 - 현재 조회 기간 상태 표시
===================================================== */
.revenue-view-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-left: 10px;
    margin-top: 0;
    margin-bottom: 0;

    padding: 6px 12px;
    border: 1px solid rgba(36, 69, 55, 0.12);
    border-radius: 999px;
    background: rgba(36, 83, 65, 0.06);
    color: #244537;

    font-size: 12px;
    font-weight: 600;
}

.revenue-view-status .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2d5d45;
}

.revenue-view-status .status-label {
    color: #6b7c72;
    font-weight: 600;
}

.revenue-view-status .status-divider {
    color: #9aa8a0;
}

#revenueViewStatusText {
    color: #244537;
    font-weight: 800;
    font-size: 14px;
}


/* 지역별 매장 카드 상태 점 */
.region-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3CB371; /* 조금 밝은 초록 */
    margin-left: 12px;
    position: relative;
    top: -1px;
}

/* 매장이 없는 지역 */
.region-dot.off {
    background: #E5E7EB;
}


/* =====================================================
   FreshVolt AI 채팅 위젯
===================================================== */
.fv-ai-widget {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9999;
}

.fv-ai-button {
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: #1f5b49;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    cursor: pointer;
}

.fv-ai-chat-box {
    position: absolute;
    right: 0;
    bottom: 58px;
    width: 360px;
    height: 430px;

    display: flex;
    flex-direction: column;

    background: #fff;
    border: 1px solid #dfe8e3;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.fv-ai-header {
    height: 48px;
    padding: 0 14px;
    background: #1f5b49;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
}

.fv-ai-header button {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.fv-ai-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f7faf8;
}

.fv-ai-message {
    margin-bottom: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    flex: 1;
}

.fv-ai-message.ai {
    background: #eaf4ef;
    color: #244537;
}

.fv-ai-message.user {
    background: #1f5b49;
    color: #fff;

    margin-left: auto;
    max-width: 75%;

    width: fit-content;
    padding: 9px 12px;

    border-radius: 14px 14px 4px 14px;
}

.fv-ai-input-area {
    height: 58px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #e5ece8;
    background: #fff;
    flex-shrink: 0;
}

.fv-ai-input-area input {
    flex: 1;
    height: 38px;
    border: 1px solid #d7e3dc;
    border-radius: 999px;
    padding: 0 14px;
    font-size: 13px;
    outline: none;
}

.fv-ai-input-area button {
    width: 56px;
    height: 38px;
    border: none;
    border-radius: 999px;
    background: #1f5b49;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

/* =====================================================
   FV COMMAND 전용 KPI GRID
   - 기존 .grid 스타일을 Command 전용으로 복사
   - 다른 화면 .grid는 건드리지 않음
===================================================== */

.command-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    width: 100%;
}

/* Command 카드 */
.command-kpi-grid .card {
    background: white;
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    min-height: 82px;
}

/* =====================================================
   COMMAND 카드 hover 효과
   - 지역 카드처럼 마우스 올리면 은은하게 강조
===================================================== */

.command-kpi-grid .card {
    cursor: pointer;
    transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.command-kpi-grid .card:hover {
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #f4faf6 100%
    );

    border-color: #2fb64f;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

    transform: translateY(-3px);
}


/* Command 카드 제목 */
.command-kpi-grid .title {
    font-size: 13px;
    font-weight: 500;
    color: #777;
    margin-bottom: 10px;
}


/* Command 카드 숫자 */
.command-kpi-grid .value {
    font-size: 22px;
    font-weight: 650;
    color: #222;
    line-height: 1.2;
}

/* 초록 */
.command-kpi-grid .ok {
    color: #1f7f4d;
    font-weight: 600;
}

/* 주황 */
.command-kpi-grid .warn {
    color: #d37b11;
    font-weight: 600;
}

/* 빨강 */
.command-kpi-grid .danger {
    color: #d63b3b;
    font-weight: 600;
}

/* =====================================================
   하단 카드
===================================================== */

.command-bottom-grid .card {

    background: #fff;

    border: 1px solid #ececec;

    border-radius: 16px;

    padding: 22px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, .04);

}

/* 하단 제목 */

.command-bottom-grid .section-title {

    font-size: 14px;

    font-weight: 600;

    color: #333;

    margin-bottom: 18px;

    letter-spacing: .5px;

}

/* 상태 행 */

.command-bottom-grid .status-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 9px 0;

    border-bottom: 1px solid #f3f3f3;

    font-size: 13px;

    color: #666;

}

.command-bottom-grid .status-row:last-child {

    border-bottom: none;

}

.command-kpi-grid .value span {

    font-size: 15px;
    font-weight: 600;

    color: #333;

    margin-left: 2px;

}


/* =====================================================
   Command 매장 판매 순위 바
===================================================== */

.command-ranking-bar {
    position: relative;
    height: 64px;
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 0 22px;

    display: flex;
    align-items: center;
    gap: 24px;

    background: #ffffff;
    border: 1px solid #e7ece8;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .04);

    overflow: hidden;
}

.command-ranking-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px;
    margin-top: 14px;
}

.ranking-box {
    height: 62px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #f4faf6 100%);
    border: 1px solid #e7ece8;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
    overflow: hidden;
}


.ranking-watermark {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 42px;
    font-weight: 900;
    letter-spacing: 2px;
    color: rgba(18, 73, 50, 0.035);
    pointer-events: none;
}

.ranking-title {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    z-index: 1;
    padding: 7px 12px;
    border-radius: 999px;
    margin-right: 12px;
    background: rgba(31, 91, 67, 0.08);
}

.ranking-list {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    z-index: 1;
}

.rank-item {
    font-size: 13px;
    font-weight: 600;
    color: #244537
}

.rank-item b {
    color: #1f5b43;
    font-size: 16px;
    font-weight: 700;
}

.ranking-box {
    cursor: pointer;
    transition: transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.ranking-box:hover {
    background: linear-gradient(
            135deg,
            #ffffff 0%,
            #f4faf6 100%
    );

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

    transform: translateY(-3px);
}

/*command 차트*/
.command-chart-grid {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}


/* =====================================================
   매장별 판매 상세 그래프 영역
   - KPI 카드 6칸 기준으로 그래프 3개를 2칸씩 배치
===================================================== */

.command-chart-section {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
}

/* 그래프 카드 하나가 2칸 차지 */
.command-chart-card {
    grid-column: span 1;
    background: #fff;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 그래프 카드 제목 */
.command-chart-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.command-chart-title-row h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #1f2d3d;
}

.command-chart-title-row span {
    font-size: 12px;
    color: #999;
}


.title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-350px);
    margin-top: 5px;

    padding: 4px 10px;

    background: #163b2d;
    color: #39ff8f;

    border: 1px solid #2ed573;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}

.live-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 14px;
    font-weight: 700;
    color: #222;
    transform: translateX(-310px);
    margin-top: 8px;
}

.live-status::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #16a34a;
    transform: translateX(0px);
    margin-top: 1px;

}


/* 실제 그래프 들어갈 자리 */
.command-chart-placeholder {
    height: 220px;
    border: 1px dashed #D8D8D8;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
    background: #FAFAFA;
}

/* =========================================
   매장별 판매 상세 - 월별 매출 그래프
   HTML 구조 변경 없이 안전하게 적용
========================================= */

.command-monthly-bar-chart {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 26px 14px 14px 42px;
    box-sizing: border-box;
    position: relative;

    background: linear-gradient(to top, #eeeeee 1px, transparent 1px) 0 26px / 100% 40px,
    linear-gradient(to top, #fafafa, #ffffff);
}

/* 왼쪽 금액 눈금 */
.command-monthly-bar-chart::before {
    content: "140만원\A 70만원\A 0원";
    white-space: pre;
    position: absolute;
    left: 6px;
    top: 22px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    color: #8a8f98;
    line-height: 1;
}

/* 70만원 기준선 */
.command-monthly-bar-chart::after {
    content: "";
    position: absolute;
    left: 42px;
    right: 14px;
    bottom: 74px;
    border-top: 1px dashed rgba(47, 95, 79, 0.35);
}

.command-monthly-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    /* 툴팁이 막대 밖으로 자유롭게 나오도록 */
    overflow: visible;
    z-index: 1;
}

.command-monthly-bar-value {
    min-height: 18px;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #1f2933;
    text-align: center;
    line-height: 1.1;
}

.command-monthly-bar {
    width: 16px;
    background: linear-gradient(to top, #174c3c, #3f8f70);
    border-radius: 9px 9px 3px 3px;
    box-shadow: 0 4px 10px rgba(31, 79, 63, 0.22);
}

.command-monthly-bar.empty {
    height: 3px !important;
    background: #e5e7eb;
    box-shadow: none;
}

.command-monthly-bar-label {
    /* ===========================
      월(1월~12월) 글자를 아래로 이동
      값이 클수록 더 아래로 내려감
      =========================== */

    margin-top: 10px;
    font-size: 10px;
    color: #1f2933;
}

.command-chart-placeholder {
    position: relative;
}

.command-chart-guide-line {
    position: absolute;
    left: 40px;
    right: 30px;
    top: 55%;
    border-top: 1px dashed #cfd6d2;
    z-index: 0;
}

/* =========================================================
   월별 그래프 - 막대와 1월~12월 라벨 배치
   - left: 70px  → 왼쪽 금액 기준선 공간 확보
   - right: 35px → 12월이 오른쪽에서 잘리지 않게 여유 확보
   - gap: 6px    → 월 사이 간격. 숫자가 클수록 넓어지고, 작을수록 12개월이 잘 들어감
========================================================= */
.command-simple-bar-chart {
    position: absolute;
    left: 70px;
    right: 35px;
    top: 20px;
    bottom: 20px;

    display: flex;
    align-items: flex-end;
    overflow: visible;
    gap: 6px;

    z-index: 2;
    box-sizing: border-box;
}

/* 왼쪽 금액 기준선 */
.command-chart-y-axis {
    position: absolute;
    top: 20px;
    left: 15px;
    bottom: 35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    font-size: 11px;
    color: #1f2933;
    z-index: 2;
}


/* =========================================================
   command 월별 그래프 툴팁
   - 막대 위쪽으로 뜨면 그래프 상단 공간을 침범함
   - 그래서 막대 칸의 가운데에 작게 표시
   - 평소에는 숨기고, 마우스를 올릴 때만 표시
========================================================= */
.command-monthly-bar-tooltip {
    position: absolute;

    /* 막대 칸의 가운데 위치 */
    top: 50%;
    left: 50%;

    /* 정확히 중앙 정렬 */
    transform: translate(-50%, -50%);

    padding: 5px 8px;
    background: #1f2933;
    color: #ffffff;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

/* =========================================
   막대에 마우스를 올리면 툴팁 표시
========================================= */

.command-monthly-bar-item:hover .command-monthly-bar-tooltip {

    opacity: 1;
    visibility: visible;
    z-index: 9999;
}

.command-monthly-bar-item:hover {
    z-index: 9999;
}


.command-daily-bar-label {
    /* ===========================
      월(1월~12월) 글자를 아래로 이동
      값이 클수록 더 아래로 내려감
      =========================== */

    margin-top: 10px;
    font-size: 10px;
    color: #1f2933;
}

/* 일별 그래프 전체 막대 영역 */
.command-daily-bar-item {
    position: relative;
    overflow: visible;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    /* 31개가 들어가야 하므로 최소 폭 제거 */
    min-width: 0;
}

/* 일별 막대 */
.command-daily-bar {
    width: 6px; /* 월별보다 얇게 */

    background: linear-gradient(to top, #174c3c, #3f8f70);

    border-radius: 6px 6px 3px 3px;

    box-shadow: 0 3px 8px rgba(32, 201, 151, .25);

    transition: .25s;
}

/*마우스올리면 커지게*/
.command-daily-bar:hover {
    transform: scaleY(1.06);
    filter: brightness(1.15);
}

/* =========================================================
   일별 그래프 - 월 라벨 정리
   - 1 30일을 막대 아래로 조금 내림
   - 1일, 11일, 30일 두 줄로 깨지지 않게 고정
========================================================= */


.command-daily-bar-label {
    margin-top: 4px;
    font-size: 8px;
    color: #777;
    white-space: nowrap;
    text-align: center;
}

/* =========================================================
   일별 그래프 툴팁
   - 막대 위쪽으로 뜨면 그래프 상단 공간을 침범함
   - 그래서 막대 칸의 가운데에 작게 표시
   - 평소에는 숨기고, 마우스를 올릴 때만 표시
========================================================= */
.command-daily-bar-tooltip {
    position: absolute;

    /* 막대 칸의 가운데 위치 */
    top: 50%;
    left: 50%;

    /* 정확히 중앙 정렬 */
    transform: translate(-50%, -50%);

    padding: 5px 8px;
    background: #1f2933;
    color: #ffffff;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    z-index: 999;
}


/* =========================================================
   일별 그래프 툴팁 표시
   - 막대 칸에 마우스를 올리면 금액 표시
========================================================= */
.command-daily-bar-item:hover .command-daily-bar-tooltip {
    opacity: 1;
}


/* =========================================================
   일별 그래프 툴팁 겹침 해결
   - 마우스를 올린 막대 칸을 가장 앞으로 올림
   - 옆 막대가 툴팁을 덮지 못하게 함
========================================================= */
.command-daily-bar-item:hover {
    z-index: 9999;
}


/* 일별 0원 막대는 보이지 않게 */
.command-daily-bar.empty {
    height: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}

/* =========================================================
   일별 그래프 전용 보정
   - 일별은 1일~31일까지 많기 때문에 월별보다 좁게 표시
   - #dailyRevenueChart 안에서만 적용되므로 월별 그래프에는 영향 없음
========================================================= */

/* 일별 그래프 전체 영역 */
#command-dailyRevenueChart {
    gap: 2px; /* 날짜 사이 간격 축소 */
    justify-content: flex-start;
}

/* 일별 그래프 한 칸 */
#command-dailyRevenueChart .monthly-bar-item {
    flex: 0 0 12px; /* 31일이 한 줄에 들어가도록 칸 폭 고정 */
}

/* 일별 막대만 얇게 */
#command-dailyRevenueChart .monthly-bar {
    width: 6px; /* 월별 16px보다 얇게 */
}

/* 일별 0원 막대는 선처럼 보이지 않게 숨김 */
#command-dailyRevenueChart .monthly-bar.empty {
    height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 일별 날짜 숫자 */
#command-dailyRevenueChart .monthly-bar-label {
    font-size: 9px;
    margin-top: 4px;
}

/* 매장 상세 정보 항목 */
#pageSub span {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin-right: 4px;
}

/* =========================================
   매장별 판매 상세 - 년별 매출 그래프
   HTML 구조 변경 없이 안전하게 적용
========================================= */

.command-yearly-bar-chart {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 26px 14px 14px 42px;
    box-sizing: border-box;
    position: relative;

    background: linear-gradient(to top, #eeeeee 1px, transparent 1px) 0 26px / 100% 40px,
    linear-gradient(to top, #fafafa, #ffffff);
}

/* 왼쪽 금액 눈금 */
.command-yearly-bar-chart::before {
    content: "140만원\A 70만원\A 0원";
    white-space: pre;
    position: absolute;
    left: 6px;
    top: 22px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    color: #8a8f98;
    line-height: 1;
}

/* 70만원 기준선 */
.command-yearly-bar-chart::after {
    content: "";
    position: absolute;
    left: 42px;
    right: 14px;
    bottom: 74px;
    border-top: 1px dashed rgba(47, 95, 79, 0.35);
}

.command-yearly-bar-item {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    overflow: visible;
}


.command-yearly-bar-value {
    min-height: 18px;
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #1f2933;
    text-align: center;
    line-height: 1.1;
}

.command-yearly-bar {
    width: 16px;
    background: linear-gradient(to top, #174c3c, #3f8f70);
    border-radius: 9px 9px 3px 3px;
    box-shadow: 0 4px 10px rgba(31, 79, 63, 0.22);

    min-height: 3px;
}

/* 막대 영역에 마우스를 올리면 표시 */
.command-yearly-bar-item:hover .command-yearly-bar-tooltip {
    opacity: 1;
    visibility: visible;
}


.command-yearly-bar.empty {
    height: 3px !important;
    background: #e5e7eb;
    box-shadow: none;
}

/* 연도 글자 */
.command-yearly-bar-label {
    margin-top: 8px;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

/* 연도별 툴팁 */
.command-yearly-bar-tooltip {
    display: block;
    position: absolute;

    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);

    padding: 5px 8px;
    background: #1f2933;
    color: #ffffff;
    font-size: 11px;
    border-radius: 6px;
    white-space: nowrap;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9999;

    transition: opacity 0.15s ease;
}


#revenueTotalViewStatusText {
    font-weight: 800;
    color: #244537;
    font-size: 14px;
}

/* 스크롤바 전체 폭 */
::-webkit-scrollbar {
    width: 13px;
}

/* 스크롤바 배경 */
::-webkit-scrollbar-track {
    background: #f4f6f8;
    border-radius: 20px;
}

/* 스크롤바 손잡이 */
::-webkit-scrollbar-thumb {
    background: #cfd9d3;
    border-radius: 20px;
    border: 2px solid #eef2f5;
}

/* 마우스를 올렸을 때 */
::-webkit-scrollbar-thumb:hover {
    background: #bfc8c3;
}


/* =====================================================
   STORE NETWORK 지도 전체 영역
===================================================== */
.store-map-wrap {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}


/* =====================================================
   대한민국 지도 들어갈 자리
===================================================== */
.korea-map-area {
    width: 100%;
    height: 220px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    background: transparent;
    color: #a0a7a3;

    font-size: 12px;
    font-weight: 500;

    box-sizing: border-box;
}


/* =====================================================
   STORE NETWORK 대한민국 지도
===================================================== */
.store-map-wrap {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    box-sizing: border-box;
}


/* SVG 지도 파일 크기조절 */
.korea-map-object {
    width: 110%;
    height: 320px;

    transform: translateY(-20px);

    border: none;
    display: block;
}

/* =====================================================
   지역명 즉시 표시 툴팁
===================================================== */
.map-tooltip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s ease;
}

/* 툴팁 배경 */
.map-tooltip rect {
    fill: #ffffff;
    stroke: #b8c1bc;
    stroke-width: 1;
}

/* 툴팁 글씨 */
.map-tooltip text {
    fill: #1f2933;
    font-size: 14px;
    font-weight: 600;
    text-anchor: middle;
}

/* 강원도에 마우스를 올리면 바로 표시 */
#CD51:hover ~ #tooltip-CD51 {
    opacity: 1;
}


/* 거래처 현황 카드 3개 가로 배치 */
.customer-manage-summary {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    margin-bottom: 20px;

}

/* 카드 안에서 제목과 숫자를 한 줄로 */
.customer-manage-summary-card {
    display: flex;
    align-items: center;
    width: 110px;

    min-width: 125px;
    min-height: 36px;
    padding: 7px 12px;

    background: #ffffff;
    border: 1px solid rgba(36, 69, 55, 0.12);
    border-radius: 9px;
    box-shadow: 0 2px 7px rgba(36, 69, 55, 0.05);

    white-space: nowrap;
}

.customer-manage-summary-label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #1f2933;
    white-space: nowrap;
}

.customer-manage-summary-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


.customer-manage-summary-value span {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.customer-manage-summary-value small {
    font-size: 11px;
    color: #7f8c85;
}

/*거래처박스*/

.customer-top-summary {

    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 4px;
    margin-bottom: 0;
    margin-left: 30px;
}

.customer-top-card {
    /* background:#fff;
    border:1px solid #dfe7df;
    border-radius:8px;*/
    padding: 0 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
}

.customer-top-card strong {
    color: #244537;
    font-size: 15px;
    font-weight: 500;
}


/* ==========================================================
   거래처 검색 한 줄 배치
========================================================== */
.customer-manage-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

}

.customer-manage-section-description {
    font-size: 13px;
    color: #777;
    font-weight: 400;
    margin-top: 4px;
}


.customer-manage-search-box {
    margin-top: 15px;
}

/*거래처검색 입력칸*/
.customer-manage-search-row input,
.customer-manage-search-row .fv-btn-primary,
.customer-manage-search-row .fv-btn-soft {
    height: 32px;
    box-sizing: border-box;
}



/* =========================================================
   거래처 목록 테이블 전체 영역
   - 검색 영역과 테이블 사이 간격
   - 테이블 외곽 디자인
========================================================= */
.customer-manage-table-wrap {
    margin-top: 24px;
    background: #ffffff;
    border: 1px solid rgba(31, 109, 67, 0.12);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(36, 69, 55, 0.06);
}


/* =========================================================
   거래처 목록 테이블 기본 설정
========================================================= */
.customer-manage-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
}


/* =========================================================
   거래처 목록 테이블 제목 행 대표
   - 연한 FreshVolt 녹색 배경
   - 진한 녹색 글씨
========================================================= */
.customer-manage-table thead {
    background: #f1f7f4;
}
.customer-manage-table thead th {
    padding: 15px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #244537;
    text-align: center;
    border-bottom: 1px solid rgba(31, 109, 67, 0.16);
    white-space: nowrap;

    background: #dcebe4;
}

/* =========================================================
   거래처 목록 데이터 행
========================================================= */
.customer-manage-table tbody td {
    padding: 15px 12px;
    font-size: 13px;
    color: #3f4d47;
    text-align: center;
    border-bottom: 1px solid #edf1ef;
    white-space: nowrap;
}


/* =========================================================
   마지막 행의 아래쪽 선 제거
========================================================= */
.customer-manage-table tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   마우스를 올렸을 때 행 강조
   - 과하지 않은 연한 녹색
========================================================= */
.customer-manage-table tbody tr {
    transition: background-color 0.18s ease;
}

.customer-manage-table tbody tr:hover {
    background: #f7faf8;
}


/* =========================================================
   거래처명 열만 왼쪽 정렬
   - 두 번째 열이 거래처명
========================================================= */
.customer-manage-table th:nth-child(2),
.customer-manage-table td:nth-child(2) {
    text-align: left;
    padding-left: 22px;
    font-weight: 600;
}


/* =========================================================
   번호 열 너비 조정
========================================================= */
.customer-manage-table th:first-child,
.customer-manage-table td:first-child {
    width: 55px;
}


/* ==========================================
   거래처 상세보기 버튼
   - 테이블 안에서만 사용하는 작은 버튼
========================================== */

.customer-detail-btn {
    width: 58px;
    height: 30px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 0;
    line-height: 1;

    border: none;
    border-radius: 7px;

    background: #1F6D43;
    color: #fff;

    font-size: 12px;
    font-weight: 500;

    cursor: pointer;
    transition: all .2s;
}
/* =====================================================
   거래처 등록 바로가기 카드
   - 신규 상품 / 신규 매장 / 신규 거래처 공통
===================================================== */
.customer-register-card {
    min-width: 230px;
    height: 38px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;

    position: relative;
    top: 1px;

    background: #EEF5F0;
    border: 1px solid #9FB9AA;
    color: #2C5C43;

    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;

    cursor: pointer;

    box-shadow: 0 2px 5px rgba(36, 76, 58, 0.10);

    transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease,
            box-shadow 0.18s ease,
            transform 0.18s ease;
}


/* =====================================================
   신규 등록 바로가기 공통 HOVER
===================================================== */
.customer-register-card:hover {
    background: #DCE9E1;
    border-color: #315B46;
    color: #18452F;

    box-shadow: 0 4px 10px rgba(36, 76, 58, 0.18);

    transform: translateY(-1px);
}


/* 거래처 등록 카드의 플러스 표시 */
.customer-register-plus {
    color: #1f6d43;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}



/* ==================================================
   신규 거래처 등록 페이지
================================================== */

.customer-register-panel {
    max-width: 1180px;
    margin: 24px auto 60px;
    padding: 30px 34px 34px;

    background: #ffffff;
    border: 1px solid #e4ebe7;
    border-radius: 16px;

    box-shadow: 0 8px 24px rgba(29, 80, 55, 0.07);
}

.customer-register-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 24px;
    padding-bottom: 18px;

    border-bottom: 1px solid #edf1ef;
}

.customer-register-header h2 {
    margin: 0 0 7px;

    color: #1f3f31;
    font-size: 24px;
    font-weight: 750;
}

.customer-register-header p {
    margin: 0;

    color: #7b8982;
    font-size: 13px;
}

/* =====================================================
   신규 거래처 등록 섹션
   - 항목 묶음이 눈에 잘 보이도록 배경 구분
===================================================== */
.customer-register-section {
    background: #f2f7f4; /* 기존보다 한 단계 진한 연한 그린 */
    border: 1px solid #d7e3dc;
    border-radius: 12px;

    padding: 24px;
    margin-bottom: 24px;
}

/* =====================================================
   섹션 제목 (기본정보 / 담당자1 / 담당자2 ...)
===================================================== */
.customer-register-section-title {

    background: #dceee4; /* 기존보다 한 단계 진한 FreshVolt Green */

    display: flex;
    align-items: center;

    border: 1px solid #b8d8c5;

    border-radius: 8px;

    padding: 8px 16px;

    font-size: 16px;
    font-weight: 700;

    color: #1f3f31;

    margin-bottom: 18px;

}


/* 제목 오른쪽 라인 */
.customer-register-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d9e3dc;

    order: 1; /* 안내 문구 다음에 라인 배치 */
}


/*거래처등록 모달 가로칸 조정*/
/* 섹션 안의 실제 입력 영역 */
.customer-register-grid {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 18px 22px;

    background: #ffffff;
    border: 1px solid #e2e9e5;
    border-radius: 9px;

    padding: 20px;
}


.customer-register-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.customer-register-field-wide {
    grid-column: 1 / -1;
}

.customer-register-field label {
    color: #4b5c53;
    font-size: 13px;
    font-weight: 650;
}

/* =====================================================
   신규 거래처 등록 입력칸
   - 배경과 입력 영역이 확실히 구분되도록 조정
===================================================== */
.customer-register-field input,
.customer-register-field select,
.customer-register-field textarea {
    width: 100%;
    box-sizing: border-box;

    background: #ffffff; /* 입력칸은 완전 흰색 */
    border: 1px solid #cbd8d1; /* 기존보다 선명한 테두리 */
    border-radius: 7px;

    padding: 11px 12px;

    color: #24372d;
    font-size: 13px;

    box-shadow: 0 1px 2px rgba(31, 109, 67, 0.04);
    outline: none;
}

/* 거래처 등록 한 줄 입력창 높이 */
.customer-register-field input,
.customer-register-field select {
    height: 42px;
}

/* 거래처등록 메모 박스크기*/
.customer-register-field textarea {
    resize: vertical;

}

/* 입력칸에 커서를 올리거나 선택했을 때 */
.customer-register-field input:focus,
.customer-register-field select:focus,
.customer-register-field textarea:focus {
    border-color: #438b63;
    box-shadow: 0 0 0 3px rgba(67, 139, 99, 0.12);
}

.customer-register-actions {
    display: flex;
    justify-content: center;
    gap: 12px;

    margin-top: 28px;
}

.customer-register-cancel-btn,
.customer-register-save-btn {
    min-width: 128px;
    height: 42px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.customer-register-cancel-btn {
    background: #ffffff;
    border: 1px solid #cfdad4;
    color: #51635a;
}

.customer-register-save-btn {
    background: #1f6d43;
    border: 1px solid #1f6d43;
    color: #ffffff;
}

.customer-register-cancel-btn:hover {
    background: #f5f8f6;
}

.customer-register-save-btn:hover {
    background: #288654;
}

.required-guide{
    color:#26724d;
    font-size:12px;
    font-weight:700;
}

/* iPad 및 좁은 화면 */
@media (max-width: 900px) {

    .customer-register-panel {
        margin: 18px 16px 40px;
        padding: 22px;
    }

    .customer-register-grid {
        grid-template-columns: 1fr;
    }

    .customer-register-field-wide {
        grid-column: auto;
    }
}

/* 서브레터 예 도로면 주소를 입력하세요*/
.customer-register-guide {
    font-size: 12px;
    font-weight: 400;
    color: #8a8f98;
    margin-left: 6px;
}


/* 담당자 메모처럼 가로 3칸을 사용하는 입력 항목 */
.customer-register-field-three {
    grid-column: span 3;
}


/* 첨부 버튼을 제목 줄의 맨 오른쪽으로 이동 */
.customer-file-upload-btn {
    margin-left: auto;

    background: none;
    border: none;

    color: #2f7d4a;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
    white-space: nowrap;

    order: 2; /* 라인 다음, 맨 오른쪽에 배치 */


}


/* 마우스를 올렸을 때 */
.customer-file-upload-btn:hover {
    color: #1f5e36;
    text-decoration: underline;
}


/* =========================================================
   거래처 상세 화면 하단 버튼 크기 조정
========================================================= */

.customer-register-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* 수정 / 저장 / 돌아가기 공통 크기 */
.customer-register-actions button {
    min-width: 110px;
    height: 30px;
    padding: 0 20px;
    font-size: 14px;
    border-radius: 8px;
}

/* 가운데 저장 버튼만 주요 버튼으로 강조 */
.customer-register-save-btn {
    min-width: 120px;
}


/* =========================================================
   거래처 하단 흰색 버튼 hover 효과 강화
========================================================= */

.customer-register-cancel-btn {
    background: #ffffff;
    border: 1px solid #d9e2dc;
    color: #315b49;
    transition: background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.customer-register-cancel-btn:hover {
    background: #edf6f1;
    border-color: #6f9f87;
    color: #1f5a40;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(42, 91, 67, 0.18);
    cursor: pointer;
}

.customer-register-cancel-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(42, 91, 67, 0.14);
}

/* 거래처관리 저장버튼 효과 */

.customer-register-save-btn {
    transition: background-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.customer-register-save-btn:hover {
    filter: brightness(0.92);
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(42, 91, 67, 0.25);
    cursor: pointer;
}

.customer-register-save-btn:active {
    transform: translateY(0);
}


/* =====================================================
   상품 관리 전용 디자인
   거래처 관리와 구조는 같지만 색상으로 구분
===================================================== */

/* 상품 검색 영역에 옅은 민트 배경 */
#productManagePage .customer-manage-search-box,
#customerManagePage .customer-manage-search-box {
    background: #f4faf7;
    border: 1px solid #d9ebe2;
    border-left: none;
    border-radius: 8px;
    padding: 18px 20px;
}

/* 상품 목록 헤더 배경 */
#productManagePage .customer-manage-table thead,
#customerManagePage .customer-manage-table thead {
    background: #edf7f2;
}

/* 상품 테이블 행에 마우스를 올렸을 때 */
#productManagePage .customer-manage-table tbody tr:hover,
#customerManagePage .customer-manage-table tbody tr:hover {
    background: #f5faf7;
}


/* 상품 등록 전용 아이콘 */
#productManagePage .product-register-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 6px;
    background: #e4f2eb;
    color: #3f755f;
    font-size: 14px;
    font-weight: 700;
}

/* 상품 등록 페이지 하단 버튼 가운데 정렬 */
#productRegisterPage .customer-register-button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

#productRegisterPage .customer-register-button-row .common-button {
    min-width: 90px;
    height: 35px;
}


/* 상품 상세 페이지 모달 */

.product-detail-modal {

    display: none;

    position: fixed;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, .45);

    z-index: 9999;

    justify-content: center;
    align-items: center;

}

.product-detail-content {

    width: 1000px;

    max-height: 90vh;

    overflow: auto;

    background: #fff;

    border-radius: 15px;

    padding: 30px;

}

.product-detail-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.product-detail-close {

    border: none;

    background: none;

    font-size: 30px;

    cursor: pointer;

}

.product-detail-footer {

    margin-top: 25px;

    display: flex;

    justify-content: flex-end;

    gap: 10px;

}

/* =====================================================
   재고 관리 상단 4칸 메뉴
===================================================== */

/* 재고 관리 상단 4칸 정렬 */
.inventory-nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    /* 바깥 박스 안에서 위아래 중앙 정렬 */
    width: 100%;
    margin: 0;

    background: none;
    border: none;
    box-shadow: none;
}


.inventory-nav-item {
    height: 52px;
    border: 1px solid #e3e9e5;
    border-radius: 10px;
    background: #ffffff;
    color: #435048;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 700;
}

/* 일반 메뉴에 마우스를 올렸을 때 */
button.inventory-nav-item:hover {
    background: #f2f7f4;
    border-color: #b9d2c7;
    color: #185c45;
}

/* 선택된 메뉴 */
button.inventory-nav-item.active,
button.inventory-nav-item.active:hover {
    background: #286f56;
    border-color: #286f56;
    color: #ffffff;
}

/* 네 번째 빈칸 */
.inventory-nav-empty {
    background: #fafcfb;
    cursor: default;
}

.inventory-nav-item.active {
    background: #2b6b52;
    color: #ffffff;
}


button.inventory-nav-item {
    cursor: pointer;
}

.inventory-nav-item.active {
    background: linear-gradient(135deg, #175f48, #28775d);
    color: #ffffff;
}

/* 상단 메뉴 전체 배경 */
/* 상단 메뉴 전체 연한 녹색 배경 */
.inventory-nav-wrap {
    background: #eef6f1;
    border: 1px solid #d9e8df;
    border-radius: 14px;

    /* 네 개의 메뉴 박스를 위아래 중앙에 배치 */
    display: flex;
    align-items: center;

    padding: 9px 10px;

    margin-top: 10px;
    margin-bottom: 14px;

    box-sizing: border-box;
}


/* =====================================================
   재고 현황 KPI 카드
===================================================== */

.inventory-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}


/* KPI 카드 한 개 */
.inventory-kpi-card {
    min-height: 90px;
    padding: 20px 22px;

    border: 1px solid #e1e9e4;
    border-radius: 14px;

    background: #ffffff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    box-shadow: 0 7px 20px rgba(25, 73, 54, 0.07);
}


/* 카드 왼쪽 내용 */
.inventory-kpi-content {
    min-width: 0;
}


/* 카드 제목 */
.inventory-kpi-label {
    margin: 0 0 10px;

    color: #69756f;
    font-size: 13px;
    font-weight: 700;
}

/* 카드 숫자 */
.inventory-kpi-value {
    margin: 0;

    color: #1f2924;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;

    white-space: nowrap;
}

/* 숫자 옆 단위 */
.inventory-kpi-value span {
    margin-left: 4px;

    color: #7b8680;
    font-size: 12px;
    font-weight: 600;
}

#inventoryTotalProductCount {
    color: #1f2924;
    font-size: 15px;
    font-weight: 600;
}

/* 오른쪽 원형 아이콘 */
.inventory-kpi-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    margin-left: 14px;

    border-radius: 50%;

    background: #e8f4ed;
    color: #257255;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 21px;
    font-weight: 800;
}


/* 금액 카드 아이콘 */
.inventory-kpi-icon.money {
    background: #edf3fb;
    color: #416fa5;
}


/* 부족 품목 아이콘 */
.inventory-kpi-icon.danger {
    background: #fdeceb;
    color: #d65752;
}


/* 부족 품목 카드 왼쪽 포인트 */
.inventory-kpi-card-danger {
    border-color: #f0dedd;
}


/* 화면이 좁을 때 2칸 */
@media (max-width: 1100px) {

    .inventory-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* 모바일에서는 1칸 */
@media (max-width: 700px) {

    .inventory-kpi-grid {
        grid-template-columns: 1fr;
    }

}


/* =====================================================
   재고 목록 + 원형 분포도
===================================================== */

.inventory-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
    gap: 16px;
    margin-top: 18px;
    margin-bottom: 26px;
}


/* 공통 패널 */
.inventory-list-panel,
.inventory-chart-panel {
    border: 1px solid #e3e9e5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 22px rgba(26, 67, 51, 0.07);
    overflow: hidden;
}


/* 패널 상단 제목 재고 현황 목록*/
.inventory-panel-header {
    min-height: 52px;
    padding: 10px 18px;

    display: flex;
    align-items: center;
    gap: 18px;

    border-bottom: 1px solid #edf1ee;
}

.inventory-panel-header h3 {
    margin: 0 0 2px;
    color: #26332d;
    font-size: 15px;
    font-weight: 600;
}

.inventory-panel-header p {
    margin: 0;
    color: #8a958f;
    font-size: 12px;
    font-weight: 500;
}


/* 새로고침 버튼 */
.inventory-refresh-button {
    height: 34px;
    padding: 0 13px;

    border: 1px solid #cfdad4;
    border-radius: 8px;

    background: #ffffff;
    color: #355e4d;

    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.inventory-refresh-button:hover {
    background: #f2f7f4;
    border-color: #9fc0b0;
}


/* 검색 영역 */
.inventory-search-bar {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 64px;
    align-items: center;
    gap: 8px;

    padding: 0;
    margin-left: 20px;
    background: transparent;
    border: 0;
}

.inventory-search-bar input,
.inventory-search-bar select {
    height: 33px;
    padding: 0 11px;

    border: 1px solid #dce4df;
    border-radius: 7px;

    background: #ffffff;
    color: #3d4943;
    font-size: 12px;
    outline: none;
}

.inventory-search-bar input:focus,
.inventory-search-bar select:focus {
    border-color: #75a28d;
    box-shadow: 0 0 0 3px rgba(59, 126, 94, 0.10);
}

.inventory-search-button {
    height: 33px;
    border: none;
    border-radius: 7px;

    background: #286f56;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}


/* 재고 표 */
.inventory-table-box {
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
}


.inventory-stock-table {
    width: 100%;
    min-width: 720px;

    /* sticky 헤더가 안정적으로 고정되게 변경 */
    border-collapse: separate;
    border-spacing: 0;
}

/* 재고 목록 컬럼 제목 */
.inventory-stock-table th {

    padding: 12px 10px;

    background: linear-gradient(#edf5ef, #dce8df);
    color: #274236;

    font-size: 12px;
    font-weight: 700;
    text-align: center;

    border-top: 1px solid #d8e2dc;
    border-bottom: 2px solid #bfcfc4;

    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);

    position: sticky;
    top: 0;
    z-index: 100;
}


.inventory-stock-table td {
    padding: 13px 10px;
    color: #3d4842;
    font-size: 12px;
    text-align: center;
}


.inventory-stock-table tbody tr:hover {
    background: #f8fbf9;
}


/* 재고 상태 */
.inventory-state {
    display: inline-flex;
    min-width: 48px;
    height: 25px;
    padding: 0 9px;

    align-items: center;
    justify-content: center;

    border-radius: 6px;

    font-size: 11px;
    font-weight: 700;
}

.inventory-state.normal {
    background: #e6f4ec;
    color: #297557;
}

.inventory-state.low {
    background: #fdeceb;
    color: #d25854;
}

.inventory-state.caution {
    background: #fff4d9;
    color: #a97712;
}


/* 오른쪽 차트 패널 */
.chart-header {
    justify-content: flex-start;
}


/* 원형 차트 */
.inventory-donut-chart {
    position: relative;
    margin: 0 auto 18px;
    flex-shrink: 0;
    width: 178px;
    height: 178px;

    border-radius: 50%;

    background: conic-gradient(
            #2563EB 0 45.2%,
            #F97316 45.2% 73.9%,
            #f3bc43 73.9% 89.2%,
            #e86b5f 89.2% 100%
    );

    box-shadow: 0 10px 25px rgba(33, 73, 55, 0.10);
}


/* 가운데 흰 원 */
.inventory-donut-chart::after {
    content: "";

    position: absolute;
    inset: 33px;

    border-radius: 50%;
    background: #ffffff;

    box-shadow: inset 0 0 0 1px #edf1ef;
}


/* 가운데 텍스트 */
.inventory-donut-center {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inventory-donut-center span {
    margin-bottom: 5px;

    color: #7d8882;
    font-size: 11px;
    font-weight: 600;
}

.inventory-donut-center strong {
    color: #26332d;
    font-size: 20px;
    font-weight: 800;
}


/* 범례 */
.inventory-donut-legend {
    width: 240px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 9px;
}

.inventory-legend-row {
    width: 100%;

    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    column-gap: 8px;
}

.inventory-legend-row:last-child {
    border-bottom: none;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

.legend-dot.chicken {
    background: #3f78d1;
}

.legend-dot.material {
    background: #35a576;
}

.legend-dot.inventory-sub-dot {
    background: #f3bc43;
}

.legend-dot.packing {
    background: #e86b5f;
}

.legend-name {
    color: #5d6862;
    font-size: 12px;
    font-weight: 600;
}

.inventory-legend-row strong {
    color: #344039;
    font-size: 12px;
    font-weight: 700;
}


/* 화면이 좁으면 아래로 배치 */
@media (max-width: 1050px) {

    .inventory-main-layout {
        grid-template-columns: 1fr;
    }

    .inventory-chart-panel {
        min-height: 340px;
    }

}

@media (max-width: 700px) {

    .inventory-search-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
    }
}

/* 왼쪽 목록과 오른쪽 도넛 높이 통일 */
.inventory-list-panel,
.inventory-chart-panel {
    height: calc(100vh - 430px);
    min-height: 420px;
    max-height: 650px;
}

/* 목록 패널 내부 구성 */
.inventory-list-panel {
    display: flex;
    flex-direction: column;
}

/* 표 부분만 스크롤 */
.inventory-table-box {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}


/* 헤더 전체를 하나의 배경으로 처리 */
.inventory-stock-table thead {
    position: sticky;
    top: 0;
    z-index: 20;

    background: #c7d9cd;
    box-shadow: 0 2px 5px rgba(28, 67, 50, 0.14);
}


/* 표 제목 고정 */
/* 재고 목록 컬럼 제목 */
.inventory-stock-table thead th {
    padding: 12px 10px;

    background: transparent;
    color: #203b2f;

    font-size: 12px;
    font-weight: 800;
    text-align: center;

    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;

    position: static;
    box-shadow: none;
}


/* 오른쪽 도넛 세로 중앙 정렬 */
.inventory-chart-panel {
    display: flex;
    flex-direction: column;
}

.inventory-donut-area {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 35px;
}

.inventory-chart-box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}


/* 기존 도넛을 박스 중앙으로만 이동 */
.inventory-chart-box > .inventory-donut-chart {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/* 도넛을 기준 박스 정중앙에 강제로 배치 */
#inventoryChart {
    position: absolute !important;
    width: 180px !important;
    height: 180px !important;

    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* 라벨 공통 */
.inventory-chart-label {
    position: absolute;
    z-index: 10;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: #2f4d3b;
}


/* ============================================================
   입고 관리 페이지
============================================================ */

.inventory-in-workspace {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    height: calc(100vh - 190px);
    min-height: 620px;
}

/* 왼쪽 품목 패널 */
.inventory-in-product-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dde7e1;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(20, 66, 45, 0.06);
}

.inventory-in-product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px;
    border-bottom: 1px solid #e8efeb;
}

.inventory-in-product-header h3 {
    margin: 0 0 5px;
    font-size: 16px;
    color: #183b2c;
}

.inventory-in-product-header p {
    margin: 0;
    font-size: 11px;
    color: #829087;
}

.inventory-in-product-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    color: #17663c;
    font-size: 13px;
    font-weight: 700;
    background: #eaf5ef;
    border-radius: 10px;
}

/* 품목 검색 */
.inventory-in-search-box {
    padding: 12px;
    border-bottom: 1px solid #e8efeb;
}

.inventory-in-search-box input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid #dce6e0;
    border-radius: 9px;
    outline: none;
    font-size: 12px;
    background: #f8faf9;
}

.inventory-in-search-box input:focus {
    border-color: #4b8f68;
    background: #ffffff;
}

/* 품목 목록 */
.inventory-in-product-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.inventory-in-product-item {
    display: block;
    width: 100%;
    margin-bottom: 7px;
    padding: 13px 12px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: 0.18s ease;
}

.inventory-in-product-item:hover {
    background: #f2f7f4;
}

.inventory-in-product-item.active {
    background: #e9f4ed;
    border-color: #9dc5ad;
}

.inventory-in-product-code {
    margin-bottom: 4px;
    color: #708078;
    font-size: 13px;
    font-weight: 700;
}

.inventory-in-product-name {
    margin-bottom: 9px;
    color: #20382d;
    font-size: 15px;
    font-weight: 600;
}

.inventory-in-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #7b8982;
    font-size: 10px;
}

.inventory-in-product-meta strong {
    color: #2e6548;
    font-size: 10px;
}

/* 오른쪽 메인 영역 */
.inventory-in-main-panel {
    min-width: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* 선택 상품 정보 */
.inventory-in-selected-card,
.inventory-in-register-card,
.inventory-in-history-card {
    margin-bottom: 16px;
    background: #ffffff;
    border: 1px solid #dde7e1;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(20, 66, 45, 0.06);
}

.inventory-in-selected-card {
    padding: 20px;
}

.inventory-in-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.inventory-in-section-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: #438260;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.inventory-in-section-title h3 {
    margin: 0 0 5px;
    color: #17382a;
    font-size: 22px;
}

.inventory-in-section-title p {
    margin: 0;
    color: #87928c;
    font-size: 11px;
}

/* 현재 재고 박스 크기 조정 */
.inventory-in-stock-box {
    width: 130px;
    min-width: 130px;

    padding: 8px 12px;
    min-height: 54px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;

    box-sizing: border-box;
}

.inventory-in-stock-box span {
    display: block;
    margin-bottom: 5px;
    color: #688076;
    font-size: 10px;
}

.inventory-in-stock-box strong {
    color: #17663c;
    font-size: 22px;
}

.inventory-in-stock-box em {
    margin-left: 4px;
    margin-top: 2px;
    color: #5c7167;
    font-size: 10px;
    font-style: normal;
}

.inventory-in-info-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.inventory-in-info-item {
    padding: 8px 12px;
    background: #f7faf8;
    border: 1px solid #e8efeb;
    border-radius: 10px;
}

.inventory-in-info-item span {
    display: block;
    margin-bottom: 6px;
    color: #839087;
    font-size: 10px;
}

.inventory-in-info-item strong {
    display: block;
    overflow: hidden;
    color: #2a4236;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 입고 등록 영역 */
.inventory-in-register-card {
    padding: 14px 18px;
    background: #EAF6ED;
    border-radius: 14px;
    border: 1px solid #9dc5ad;


}

/* 입고 정보 입력 헤더 */
.inventory-in-register-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-bottom: 17px;
    gap: 4px;
}

/* 최근 입고 내역 헤더 */
.inventory-in-history-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin-bottom: 17px;
    gap: 12px;
}

.inventory-in-register-header h3,
.inventory-in-history-header h3 {
    margin: 0 0 5px;
    color: #2a4236;
    font-size: 17px;
}

.inventory-in-register-header p,
.inventory-in-history-header p {
    margin: 0;
    color: #859189;
    font-size: 11px;
}

.inventory-in-step-badge {
    display: block;
    margin: 0 0 6px 0;

    padding: 0;

    color: #29704c;
    font-size: 9px;
    font-weight: 800;

    background: transparent;
}

.inventory-in-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 14px;
}

.inventory-in-field {
    min-width: 0;
}

.inventory-in-field label {
    display: block;
    margin-bottom: 7px;
    color: #4c5f56;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   입고 관리 - 입고지 옆 비고 영역
========================================================= */

.inventory-in-field-memo {
    grid-column: span 3;
}

.inventory-in-field-memo textarea {
    width: 100%;
    min-height: 42px;
    height: 42px;
    resize: none;
}


/* ==========================================
   입고구분 / 검수결과 Select 전용
========================================== */

.inventory-in-field select {

    width: 100%;
    height: 39px;

    padding: 0 11px;

    border: 1px solid #dce5e0;
    border-radius: 8px;

    background: #fbfcfb;

    outline: none;

    box-sizing: border-box;

    font-family: inherit;
    font-size: 11px;
}


.inventory-in-field input,
.inventory-in-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dce5e0;
    border-radius: 8px;
    outline: none;
    background: #fbfcfb;
    font-family: inherit;
    font-size: 11px;
}

.inventory-in-field input {
    height: 39px;
    padding: 0 11px;
}

.inventory-in-field textarea {
    min-height: 38px;
    height: 38px;
    padding: 8px 11px;
    resize: none;
}

.inventory-in-field input:focus,
.inventory-in-field textarea:focus {
    border-color: #4b8f68;
    background: #ffffff;
}

.inventory-in-field-full {
    grid-column: 1 / -1;
}

.inventory-in-input-unit {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #dce5e0;
    border-radius: 8px;
    background: #fbfcfb;
}

.inventory-in-input-unit:focus-within {
    border-color: #4b8f68;
    background: #ffffff;
}

.inventory-in-input-unit input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
}

.inventory-in-input-unit span {
    padding: 0 11px;
    color: #66776f;
    font-size: 10px;
    white-space: nowrap;
}

/* 예상 금액 및 등록 버튼 */
.inventory-in-total-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 8px;
    padding: 8px 14px;

    background: #f0f7f3;
    border-radius: 11px;
    min-height: 38px;
}

.inventory-in-total-preview span {
    display: block;
    margin-bottom: 4px;
    color: #72847b;
    font-size: 10px;
}

.inventory-in-total-preview strong {
    color: #173b2b;
    font-size: 20px;
}

/* 입고 등록 버튼 */
.inventory-in-register-button {
    min-width: 100px;
    height: 38px;

    padding: 0 22px;

    border: none;
    border-radius: 8px;

    background: #2f7d4f;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.inventory-in-register-button:hover {
    background: #115631;
}

/* 최근 입고 이력 */
.inventory-in-history-card {
    padding: 18px 20px;
}


/* 최근 입고 건수 */
#inventoryInHistoryCount {
    margin-left: 8px;
    margin-right: 12px;

    font-size: 20px;
    font-weight: 600;
    line-height: 1;

    color: #1f3b2c;
    white-space: nowrap;
}


#inventoryInAllDetailBtn {
    margin-left: auto;

}

.inventory-in-history-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.inventory-in-history-header > span {
    color: #115631;
    font-size: 16px;
    font-weight: 700;
}

.inventory-in-history-table-wrap {
    overflow: visible;
}

.inventory-in-history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 최근 입금내역 표제목 글씨 */
.inventory-in-history-table th {
    padding: 10px 8px;
    color: #3d574a;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    background: #e9f1ed;
    border-bottom: 1px solid #d6e2dc;
}


/* 최근 입금내역 내용 글씨 */
.inventory-in-history-table td {
    padding: 11px 8px;
    color: #3d574a;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid #eef2ef;
}

.inventory-in-empty-row td {
    padding: 26px 8px;
    color: #98a29d;
}

.inventory-in-complete-badge {
    display: inline-block;
    padding: 4px 8px;
    color: #237047;
    font-size: 9px;
    font-weight: 700;
    background: #e8f5ed;
    border-radius: 20px;
}

/* 반응형 */
@media (max-width: 1100px) {
    .inventory-in-workspace {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .inventory-in-info-grid,
    .inventory-in-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .inventory-in-workspace {
        display: block;
        height: auto;
    }

    .inventory-in-product-panel {
        height: 310px;
        margin-bottom: 15px;
    }

    .inventory-in-info-grid,
    .inventory-in-form-grid {
        grid-template-columns: 1fr;
    }

    .inventory-in-field-full {
        grid-column: auto;
    }
}


/* 기본 버튼 */
.inventory-history-period button {
    height: 30px;
    padding: 0 8px;

    border: 1px solid #d9e4dc;
    border-radius: 7px;

    background: #ffffff;
    color: #56665c;

    font-size: 10px;
    font-weight: 500;

    cursor: pointer;
}

/* 선택된 버튼만 녹색 */
.inventory-history-period button.active {
    background: #234f3a;
    border-color: #234f3a;
    color: #ffffff;
}


/* 현재 조회 표시 */
#inventoryInCurrentView {
    display: inline-flex;
    align-items: center;

    height: 30px;
    padding: 0 14px;
    margin-left: 8px;

    border: 1px solid #dce9e0;
    border-radius: 16px;

    background: #f1f8f3;
    color: #234f3a;

    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* 월별 / 일별 / 년도별 / 기간별 버튼 최종 디자인 */
#inventoryMonthBtn,
#inventoryDayBtn,
#inventoryYearBtn,
#inventoryPeriodBtn {
    width: 72px;
    height: 34px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d5e1da;
    border-radius: 8px;

    background: #ffffff;
    color: #50645a;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    cursor: pointer;
    flex: 0 0 72px;
}

#inventoryMonthBtn:hover,
#inventoryDayBtn:hover,
#inventoryYearBtn:hover,
#inventoryPeriodBtn:hover {

    background: #2d6d56;
    color: #fff;

    transition: 0.2s;
}


/* 선택된 기간 버튼 */
#inventoryMonthBtn.active,
#inventoryDayBtn.active,
#inventoryYearBtn.active,
#inventoryPeriodBtn.active {
    border-color: #174f3b;
    background: #174f3b;
    color: #ffffff;
}


/* ==========================================================
   FreshVault 공통 토스트 메시지
========================================================== */

.freshvault-toast {
    position: fixed;
    top: 30px;
    right: auto;
    left: 50%;

    min-width: 320px;
    max-width: 460px;

    padding: 16px 20px;

    background: #174f3d;
    color: #ffffff;

    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;

    opacity: 0;
    visibility: hidden;
    transform: translateX(-50px);

    transition: opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;

    z-index: 99999;
}

/* 토스트 표시 상태 */
.freshvault-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* 업체 CODE 자동 생성 안내문 */
.customer-code-guide-toast {
    position: fixed;
    left: 55%;
    top: 90px;
    transform: translateX(-50%) translateY(-10px);

    padding: 11px 18px;
    border-radius: 8px;

    background: rgba(31, 63, 49, 0.92);
    color: #ffffff;

    font-size: 13px;
    font-weight: 650;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

    z-index: 9999;
}

.customer-code-guide-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* =========================================================
   입고 상세보기 모달
========================================================= */

.inventory-detail-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;

    align-items: center;
    justify-content: center;

    padding: 18px;

    background: rgba(15, 30, 24, 0.55);
    backdrop-filter: blur(4px);
}


.inventory-detail-card {
    width: min(920px, 94vw);
    max-height: 94vh;
    overflow-y: auto;

    padding: 22px;

    background: #ffffff;
    border: 1px solid rgba(35, 92, 66, 0.18);
    border-radius: 22px;

    box-shadow: 0 28px 70px rgba(14, 37, 27, 0.26);
}


/* 모달 헤더 */
.inventory-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding-bottom: 22px;
    border-bottom: 1px solid #e5ece8;
}

.inventory-detail-header-label {
    display: block;

    margin-bottom: 7px;

    color: #3c795d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.inventory-detail-header h2 {
    margin: 0 0 7px;

    color: #172b22;
    font-size: 25px;
}

.inventory-detail-header p {
    margin: 0;

    color: #829087;
    font-size: 13px;
}

.inventory-detail-close-x {
    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #f0f5f2;
    color: #315b47;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}


/* 발주번호 강조 */
.inventory-detail-order-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 22px;
    padding: 20px 22px;

    border: 1px solid #b9d5c6;
    border-radius: 15px;
    background: linear-gradient(
            135deg,
            #edf8f1,
            #f7fbf8
    );
}

.inventory-detail-order-box span {
    display: block;

    margin-bottom: 7px;

    color: #688073;
    font-size: 12px;
    font-weight: 700;
}

.inventory-detail-order-box strong {
    color: #164a32;
    font-size: 22px;
    letter-spacing: 0.4px;
}


.inventory-detail-order-status {
    padding: 7px 13px;

    border: 1px solid #cbd8d1;
    border-radius: 30px;

    background: #eef3f0;
    color: #52635a;

    font-size: 12px;
    font-weight: 700;
}


/* 구역 */
.inventory-detail-section {
    margin-top: 22px;
    padding: 21px;

    border: 1px solid #e1e9e4;
    border-radius: 16px;

    background: #fbfcfb;
}

.inventory-detail-section-title {
    display: flex;
    justify-content: space-between;

    margin-bottom: 17px;
}

.inventory-detail-section-title h3 {
    margin: 0 0 4px;

    color: #233b30;
    font-size: 16px;
}

.inventory-detail-section-title p {
    margin: 0;

    color: #93a198;
    font-size: 11px;
}


/* 정보 그리드 */
.inventory-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.inventory-detail-item {
    min-height: 58px;
    padding: 9px 12px;

    border: 1px solid #e4ebe7;
    border-radius: 11px;

    background: #ffffff;
}

.inventory-detail-item span {
    display: block;

    margin-bottom: 8px;

    color: #819087;
    font-size: 11px;
    font-weight: 700;
}

.inventory-detail-item strong {
    display: block;

    overflow-wrap: anywhere;

    color: #263d32;
    font-size: 14px;
    font-weight: 700;
}

.inventory-detail-money {
    background: #eff8f2;
    border-color: #c8e0d1;
}

.inventory-detail-money strong {
    color: #1d6944;
    font-size: 18px;
}


/* 입고 내역 상세페이지 비고 */
.inventory-detail-memo {
    min-height: 80px;
    padding: 16px;

    border: 1px solid #e2e9e5;
    border-radius: 11px;

    background: #ffffff;

    color: #52645a;
    font-size: 13px;
    line-height: 1.7;

    white-space: pre-wrap;
}


/* 하단 버튼 */
.inventory-detail-footer {
    display: flex;
    justify-content: flex-end;

    margin-top: 22px;
}

.inventory-detail-close-button {
    min-width: 110px;
    height: 42px;

    border: none;
    border-radius: 9px;

    background: #276c4c;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.inventory-detail-close-button:hover {
    background: #1f5b3f;
}


/* iPad 및 작은 화면 */
@media (max-width: 900px) {

    .inventory-detail-modal {
        padding: 18px;
    }

    .inventory-detail-card {
        padding: 22px;
    }

    .inventory-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   입고 상세보기 - 거래처 고정정보 헤더
========================================================= */

.inventory-detail-company-strip {
    margin-top: 10px;
    padding: 15px 18px;

    border-top: 1px solid #dce8e1;
    border-bottom: 1px solid #dce8e1;

    background: #f8fbf9;
}

.inventory-detail-company-title {
    margin-bottom: 8px;

    color: #2b6b4b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.inventory-detail-company-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    color: #34483e;
    font-size: 13px;
}

.inventory-detail-company-main strong {
    color: #173e2b;
    font-size: 15px;
}

.inventory-detail-company-divider {
    color: #a5b3ab;
}

.inventory-detail-company-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 8px;

    color: #7a8981;
    font-size: 11px;
}

.inventory-detail-company-sub span {
    display: flex;
    gap: 5px;
}

.inventory-detail-company-sub strong {
    color: #4c5e54;
    font-weight: 700;
}


/* =========================================================
   입고 상세보기 거래처 정보 한 줄
========================================================= */

.inventory-detail-company-line {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;

    margin: 0 4px;
    padding: 14px 4px;

    border-bottom: 1px solid #dfe8e3;

    color: #68786f;
    font-size: 11px;

    white-space: nowrap;
}

.inventory-detail-company-line strong {
    color: #263c31;
    font-size: 12px;
    font-weight: 700;
}

.inventory-detail-company-label {
    margin-right: 5px;

    color: #276949;
    font-size: 12px;
    font-weight: 800;
}

.inventory-detail-divider {
    color: #c5cec9;
}


/* =========================================================
   입고 상세보기 모달 - 하단 버튼 영역 전용
   용도 :
   - 하단 버튼 사이 간격 및 위치 조정
   - 다른 모달의 footer에는 영향 없음
========================================================= */
#inventoryInDetailModal .inventory-detail-footer {
    margin-top: 12px;
    gap: 8px;
}


/* =========================================================
   입고 상세보기 모달 - 닫기 버튼 전용
   용도 :
   - 닫기 버튼의 크기와 모양 조정
   - 마우스를 올렸을 때(hover) 자연스럽게 반응
   - 다른 모달의 닫기 버튼에는 영향 없음
========================================================= */
#inventoryInDetailModal .inventory-detail-close-button {
    min-width: 82px;
    height: 34px;
    border-radius: 7px;

    transition: 0.18s ease;
}

#inventoryInDetailModal .inventory-detail-close-button:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* =========================================================
   입고 상세보기 모달 - 하단 버튼 정렬
   용도 :
   - 입고 상세보기 모달 안의 버튼만 한 줄로 정렬
   - 다른 모달의 footer에는 영향 없음
========================================================= */
#inventoryInDetailModal .inventory-detail-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;

    margin-top: 12px;
}


/* =========================================================
   입고 상세보기 모달 - 닫기 / 수정 버튼 공통 규격
   용도 :
   - 두 버튼의 크기, 높이, 모서리, 글자 크기를 동일하게 맞춤
   - 기존 공통 버튼 CSS는 그대로 유지
========================================================= */
#inventoryInDetailModal .inventory-detail-close-button,
#inventoryInDetailModal .inventory-detail-edit-button {
    min-width: 82px;
    height: 34px;
    padding: 0 14px;

    border: none;
    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.18s ease;
}


/* 입고 상세보기 - 닫기 버튼 */
#inventoryInDetailModal .inventory-detail-close-button {
    background: #276c4c; /* 연한 그린 */
    color: #ffffff;
}

/* =========================================================
   입고 상세보기 모달 - 수정 버튼 색상
   용도 :
   - 수정은 주요 기능이므로 FreshVault 그린 사용
========================================================= */
#inventoryInDetailModal .inventory-detail-edit-button {
    background: #276c4c;
    color: #ffffff;
}


/* =========================================================
   입고 상세보기 모달 - 버튼 Hover
========================================================= */
#inventoryInDetailModal .inventory-detail-close-button:hover,
#inventoryInDetailModal .inventory-detail-edit-button:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}


/* 검색 버튼 */
#inventoryInSearchBtn {

    height: 34px;
    min-width: 70px;

    padding: 0 18px;

    border: none;
    border-radius: 8px;

    background: #234f3a;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.2s;

}


#inventoryInSearchBtn:hover {

    background: #2f684d;

}


/* 전체 상세보기 버튼 */
#inventoryInAllDetailBtn {
    height: 32px;
    padding: 0 17px;
    margin-left: auto;

    border: none;
    border-radius: 7px;

    background: #286b4b;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

#inventoryInAllDetailBtn:hover {
    background: #20583e;
}

/* =========================================================
   최근 입고 내역 헤더 최종 배치
========================================================= */
/* 연도 영역 */
.inventory-month-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 2px 2px 12px 2px;

    border-bottom: 1px solid #edf1ee;
    margin-bottom: 12px;
}


.inventory-month-year-title {
    font-size: 15px;
    font-weight: 700;
    color: #263c31;
}


/* 연도 좌우 버튼 */

.inventory-year-arrow {
    width: 32px;
    height: 32px;

    border: none;
    border-radius: 8px;

    background: #f3f7f4;
    color: #365847;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.inventory-year-arrow:hover {
    background: #e5eee8;
}


/* 최근 입고 내역 제목과 설명 */
.inventory-history-title {
    width: 135px;
    min-width: 135px;
    margin: 0;
}


/* 0건부터 검색, 전체 상세보기까지 */
.inventory-history-toolbar {
    display: flex;
    align-items: center;

    min-width: 0;
    gap: 8px;

    white-space: nowrap;
}


/* 전체 상세보기만 오른쪽 끝 */
#inventoryInAllDetailBtn {
    margin-left: auto;
    flex-shrink: 0;
}


/* 월별 버튼 아래에 뜨는 스크롤 목록 */
.inventory-history-toolbar {
    position: relative;

}

/* 월별 버튼 + 월 목록 기준점 */
.inventory-month-dropdown-wrap {
    position: relative;

}


/* 월별 드롭다운 */
.inventory-month-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;

    width: 300px;
    padding: 14px;

    background: #f1f6f2;
    border: 1px solid #c9d8ce;
    border-radius: 14px;

    box-shadow: 0 12px 30px rgba(31, 65, 48, 0.16);

    z-index: 1000;
}

/* 월 버튼 */

.inventory-month-item {
    height: 38px;

    border: 1px solid transparent;
    border-radius: 8px;

    background: #f7f9f7;
    color: #4a5750;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.15s;
}


.inventory-month-item:hover {
    background: #eaf5ef;
    color: #23704c;
}


/* 월 4 × 3 */

.inventory-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}


/* ================================
   일별 달력 드롭다운
================================ */

.inventory-day-dropdown-wrap {
    position: relative;
}

/* 일별 전체 팝업 */
.inventory-day-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;

    width: 300px;
    padding: 10px;

    background: #f6f8f6;
    border: 1px solid #d7dfda;
    border-radius: 12px;

    box-shadow: 0 8px 20px rgba(31, 65, 48, 0.10);
    box-sizing: border-box;

    z-index: 1000;
}

/* 상단 연월 */
.inventory-daily-header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    gap: 6px;

    margin-bottom: 8px;
}

.inventory-daily-header button {
    height: 30px;
    border: 1px solid #cddbd2;
    border-radius: 7px;

    background: #dfeae3;
    color: #355746;

    cursor: pointer;
}

.inventory-daily-current-month {
    font-size: 13px;
    font-weight: 700;

    background: #e7efe9 !important;
    color: #355746 !important;
}

/* 요일 */
.inventory-daily-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    text-align: center;
    font-size: 12px;
    font-weight: 700;

    margin-bottom: 4px;
}

.inventory-daily-week span {
    padding: 5px 0;
}

/* 달력 */
.inventory-daily-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.inventory-daily-week,
.inventory-daily-calendar {
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.inventory-daily-date {
    width: 100%;
    height: 28px;

    min-width: 0;
    padding: 0;
    box-sizing: border-box;

    border: none;
    border-radius: 6px;

    background: white;
    color: #34483e;

    font-size: 12px;

    cursor: pointer;
}

.inventory-daily-date:hover {
    background: #dcebe2;
}

/* 이전/다음 달 숫자 */
.inventory-daily-date.other-month {
    color: #aab5af;
    background: transparent;
}


/* 일별 - 연도 선택 */
.inventory-daily-year-select {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;
}

.inventory-daily-year-select strong {
    text-align: center;
    font-size: 15px;
}

.inventory-daily-year-select button {
    height: 34px;
    border: none;
    border-radius: 8px;

    background: #1f5a43;
    color: white;

    cursor: pointer;
}

/* 일별 - 12개월 */
.inventory-daily-month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.inventory-daily-month-grid .inventory-month-item {
    height: 36px;

    border: none;
    border-radius: 8px;

    background: white;
    color: #264c3b;

    font-weight: 600;

    cursor: pointer;
}

.inventory-daily-month-grid .inventory-month-item:hover {
    background: #dcebe2;
}


/* =========================================================
   [재고 관리 > 입고 관리 > 최근 입고 내역]
   연도별 Y 드롭다운
========================================================= */

.inventory-year-dropdown-wrap {
    position: relative;
}

.inventory-year-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;

    width: 110px;
    padding: 7px;

    background: #f6f8f6;
    border: 1px solid #d7dfda;
    border-radius: 10px;

    box-shadow: 0 8px 20px rgba(31, 65, 48, 0.10);
    z-index: 1000;
}

.inventory-year-item {
    display: block;
    width: 100%;
    height: 30px;

    border: none;
    border-radius: 6px;

    background: transparent;
    color: #34483e;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.inventory-year-item:hover {
    background: #e7efe9;
}


/* =========================================================
   재고 관리 > 입고 관리 > 최근 입고 내역
   기간별 P
========================================================= */

.inventory-period-dropdown-wrap {
    position: relative;
}


/* 기간 선택 영역 */
.inventory-period-list {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    width: max-content;

    padding: 10px 12px;

    background: rgba(247, 250, 248, 0.97);

    border: 1px solid #d9e2dc;
    border-radius: 12px;

    box-shadow: 0 8px 22px rgba(31, 65, 48, 0.10);

    z-index: 1000;
}


/* 시작일 ~ 종료일 ~ 조회 */
.inventory-period-inline {
    display: flex;
    align-items: flex-end;

    gap: 9px;

    white-space: nowrap;
}


/* 날짜 한 칸 */
.inventory-period-date-box {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


/* 시작일 / 종료일 글씨 */
.inventory-period-label {
    padding-left: 2px;

    font-size: 10px;
    font-weight: 600;

    color: #718078;
}


/* 날짜 입력창 */
.inventory-period-date-box input {
    width: 138px;
    height: 34px;

    box-sizing: border-box;

    padding: 0 9px;

    border: 1px solid #d5ded8;
    border-radius: 8px;

    background: #ffffff;

    color: #34483e;

    font-size: 12px;
    font-weight: 600;

    outline: none;

    transition: 0.15s ease;
}


/* 날짜칸 클릭 */
.inventory-period-date-box input:focus {
    border-color: #9fb8a8;

    box-shadow: 0 0 0 3px rgba(81, 127, 99, 0.08);
}


/* 가운데 ~ */
.inventory-period-separator {
    padding-bottom: 8px;

    font-size: 14px;
    font-weight: 700;

    color: #809087;
}


/* 조회 버튼 */
.inventory-period-search-btn {
    height: 34px;

    padding: 0 17px;

    border: 1px solid #9db6a6;
    border-radius: 8px;

    background: #dfeae3;

    color: #315341;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.15s ease;
}


.inventory-period-search-btn:hover {
    background: #d3e2d8;
}


/* 클릭 */
.inventory-period-search-btn:active {
    transform: translateY(1px);
}


/* =========================================================
   입고 관리 > 최근 입고 내역
   현재 조회 + 전체 상세보기 정렬
========================================================= */

/* 현재 조회 박스 */
.inventory-in-current-view {
    display: flex;
    align-items: center;
    gap: 8px;

    height: 34px;
    padding: 0 13px;

    background: #bfd7cb;
    border: 1px solid #dce5df;
    border-radius: 17px;

    white-space: nowrap;
    box-sizing: border-box;
}

/* "현재 조회" */
.inventory-in-current-label {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 14px;
    font-weight: 700;
    color: #35483e;

}


/* 앞의 작은 녹색 점 */
.inventory-in-current-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    background: #2f6b4f;
    border-radius: 50%;
}

/* 2026년 07월 기준 */
#inventoryInCurrentView {
    font-size: 13px;
    font-weight: 700;
    color: #35483e;

    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}


/* 전체 상세보기 버튼 */
#inventoryInAllDetailBtn {
    margin-left: auto;

    height: 34px;
    padding: 0 16px;

    border: none;
    border-radius: 8px;

    background: #315b49;
    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
    white-space: nowrap;
}

/* 마우스 올렸을 때 */
#inventoryInAllDetailBtn:hover {
    background: #294d3e;
}


/* =========================================================
   FreshVault AI 학습 관리
   - 학습 입력 / AI 해석 2단 구성
   - 기존 FreshVault 그린 톤 유지
   ========================================================= */


/* AI 페이지 전체 */
.freshvault-ai-page {
    width: 100%;
    padding: 18px 22px 28px;
    box-sizing: border-box;
}


/* =========================================================
   상단 탭
   ========================================================= */

.ai-learning-tabs {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px;
    margin-bottom: 18px;

    background: #eef4f0;
    border: 1px solid #d9e5dd;
    border-radius: 12px;
}

.ai-learning-tab {
    min-width: 110px;
    height: 40px;

    padding: 0 18px;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: #53645b;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
    transition: all 0.18s ease;
}

.ai-learning-tab:hover {
    background: #e0ebe4;
    color: #31483a;
}

.ai-learning-tab.active {
    background: #3f6652;
    color: #ffffff;

    box-shadow: 0 2px 7px rgba(46, 82, 62, 0.16);
}


/* =========================================================
   좌우 작업 영역
   ========================================================= */

.ai-learning-workspace {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 18px;

    align-items: stretch;
}


/* =========================================================
   공통 패널 카드
   ========================================================= */

.ai-learning-panel {
    min-height: 520px;

    padding: 22px;

    background: #ffffff;

    border: 1px solid #dfe7e2;
    border-radius: 14px;

    box-shadow: 0 4px 16px rgba(44, 69, 55, 0.06);

    box-sizing: border-box;
}


/* 패널 제목 */
.ai-learning-panel-header {
    padding-bottom: 16px;
    margin-bottom: 18px;

    border-bottom: 1px solid #edf1ee;
}

.ai-learning-panel-header h3 {
    margin: 0 0 5px;

    color: #263c31;

    font-size: 19px;
    font-weight: 800;
}

.ai-learning-panel-header span {
    color: #7a8981;

    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   학습 종류 버튼
   ========================================================= */

.ai-learning-type-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;

    margin-bottom: 14px;
}

.ai-learning-type {
    height: 34px;

    padding: 0 15px;

    border: 1px solid #d5e0d9;
    border-radius: 18px;

    background: #f7faf8;
    color: #5d6f64;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.ai-learning-type:hover {
    background: #edf4ef;
}

.ai-learning-type.active {
    border-color: #769c86;

    background: #dfece4;
    color: #315542;
}


/* =========================================================
   학습 입력 textarea
   ========================================================= */

.ai-learning-textarea {
    width: 100%;
    height: 230px;

    padding: 18px;

    resize: vertical;

    border: 1px solid #d9e3dd;
    border-radius: 12px;

    background: #fbfdfc;
    color: #2b3831;

    font-size: 15px;
    line-height: 1.7;

    box-sizing: border-box;

    outline: none;
}

.ai-learning-textarea::placeholder {
    color: #9aa7a0;
}

.ai-learning-textarea:focus {
    border-color: #719782;

    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(74, 119, 91, 0.09);
}


/* =========================================================
   파일 첨부 박스
   ========================================================= */

.ai-learning-file-box {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 76px;

    margin-top: 14px;

    border: 1px dashed #aec1b5;
    border-radius: 10px;

    background: #f7faf8;
    color: #73847a;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   AI 분석 버튼
   ========================================================= */

.ai-learning-analyze-btn {
    width: 100%;
    height: 44px;

    margin-top: 14px;

    border: none;
    border-radius: 9px;

    background: #3f6652;
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition: all 0.18s ease;
}

.ai-learning-analyze-btn:hover {
    background: #345846;

    transform: translateY(-1px);
}


/* =========================================================
   오른쪽 AI 해석 패널
   ========================================================= */

.ai-learning-result-panel {
    display: flex;
    flex-direction: column;
}


/* 분석 전 빈 상태 */
.ai-learning-empty {
    flex: 1;

    min-height: 330px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px dashed #d7e1db;
    border-radius: 12px;

    background: #fafcfb;

    padding: 30px;

    box-sizing: border-box;
}


/* AI 원형 아이콘 */
.ai-learning-empty-icon {
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 50%;

    background: #e3eee7;
    color: #3e6953;

    font-size: 16px;
    font-weight: 900;

    letter-spacing: 1px;
}

.ai-learning-empty strong {
    margin-bottom: 10px;

    color: #3d5046;

    font-size: 15px;
    font-weight: 800;
}

.ai-learning-empty p {
    margin: 0;

    color: #8a9790;

    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   수정 / 학습 승인 버튼
   ========================================================= */

.ai-learning-result-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 16px;
}

.ai-learning-edit-btn,
.ai-learning-approve-btn {
    height: 38px;

    padding: 0 18px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.ai-learning-edit-btn {
    border: 1px solid #ccd8d1;

    background: #ffffff;
    color: #5f7067;
}

.ai-learning-edit-btn:hover {
    background: #f3f7f4;
}

.ai-learning-approve-btn {
    border: none;

    background: #3f6652;
    color: #ffffff;
}

.ai-learning-approve-btn:hover {
    background: #345846;
}


/* =========================================================
   iPad 가로 및 작은 PC 화면
   ========================================================= */

@media (max-width: 1180px) {

    .freshvault-ai-page {
        padding: 14px 16px 24px;
    }

    .ai-learning-workspace {
        gap: 14px;
    }

    .ai-learning-panel {
        padding: 18px;
    }

    .ai-learning-tab {
        min-width: 96px;
        padding: 0 12px;
    }
}


/* 화면이 더 좁아지면 세로 배치 */
@media (max-width: 900px) {

    .ai-learning-workspace {
        grid-template-columns: 1fr;
    }

    .ai-learning-panel {
        min-height: auto;
    }

    .ai-learning-tabs {
        overflow-x: auto;
    }

    .ai-learning-tab {
        flex: 0 0 auto;
    }
}


/* =========================================================
   입고 관리 - 입고 내역 전체보기 모달
========================================================= */

.inventory-history-modal {
    display: none;

    position: fixed;
    inset: 0;

    background: rgba(15, 23, 42, 0.42);

    align-items: center;
    justify-content: center;

    padding: 24px;

    z-index: 3000;
}


/* 전체보기 모달 본체 */
.inventory-history-modal-content {
    width: min(1500px, 96vw);
    height: min(820px, 90vh);

    background: #ffffff;
    border-radius: 18px;

    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =========================================================
   상단 제목
========================================================= */

.inventory-history-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 26px 18px;

    border-bottom: 1px solid #e8edf2;
}

.inventory-history-modal-header h2 {
    margin: 0;

    font-size: 21px;
    font-weight: 800;

    color: #172033;
}

.inventory-history-modal-header p {
    margin: 5px 0 0;

    font-size: 13px;
    color: #8a94a5;
}


/* 닫기 */
.inventory-history-modal-close {
    width: 36px;
    height: 36px;

    border: none;
    border-radius: 9px;

    background: transparent;

    font-size: 27px;
    line-height: 1;

    color: #687386;

    cursor: pointer;
}

.inventory-history-modal-close:hover {
    background: #f3f5f7;
}




/* =========================================================
   건수 / 인쇄 영역
========================================================= */

.inventory-history-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 26px;

    font-size: 14px;
    color: #667085;
}

.inventory-history-summary strong {
    margin-left: 8px;

    font-size: 15px;
    color: #172033;
}


/* 인쇄 버튼 */
.inventory-history-print-button {
    height: 34px;

    padding: 0 16px;

    border: 1px solid #d9e0e7;
    border-radius: 8px;

    background: #ffffff;

    font-size: 13px;
    font-weight: 700;

    color: #344054;

    cursor: pointer;
}

.inventory-history-print-button:hover {
    background: #f7f9fa;
}


/* =========================================================
   입고 내역 표
========================================================= */

.inventory-history-table-wrap {
    flex: 1;

    margin: 0 26px;

    border-top: 1px solid #e6eaef;
    border-bottom: 1px solid #e6eaef;

    overflow: auto;
}

.inventory-history-table {
    width: 100%;
    min-width: 1100px;

    border-collapse: collapse;

    table-layout: fixed;
}


/* 표 헤더 */
.inventory-history-table thead th {
    position: sticky;
    top: 0;

    height: 42px;

    padding: 0 8px;

    background: #f7f9fa;

    border-bottom: 1px solid #dde3e9;

    font-size: 12px;
    font-weight: 700;

    color: #667085;

    text-align: center;

    white-space: nowrap;

    z-index: 1;
}


/* 한 건 = 작은 한 줄 */
.inventory-history-table tbody td {
    height: 42px;

    padding: 6px 8px;

    border-bottom: 1px solid #edf0f3;

    font-size: 13px;

    color: #344054;

    text-align: center;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inventory-history-table tbody tr:hover {
    background: #fafcfb;
}


/* 거래처 / 상품명은 왼쪽 정렬 */
.inventory-history-table tbody td:nth-child(2),
.inventory-history-table tbody td:nth-child(4) {
    text-align: left;
}


/* =========================================================
   페이지 번호
========================================================= */

.inventory-history-pagination {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 14px 24px;
}


/* 나중에 JS가 만드는 페이지 버튼 */
.inventory-history-pagination button {
    min-width: 34px;
    height: 34px;

    padding: 0 9px;

    border: 1px solid #e0e5ea;
    border-radius: 8px;

    background: #ffffff;

    font-size: 13px;
    font-weight: 600;

    color: #667085;

    cursor: pointer;
}

.inventory-history-pagination button:hover {
    background: #f5f7f8;
}

.inventory-history-pagination button.active {
    background: #eef6f2;

    border-color: #c8ded3;

    color: #315d4b;

    font-weight: 800;
}


/* =========================================================
   iPad 가로 / 작은 화면
========================================================= */

@media (max-width: 1180px) {

    .inventory-history-modal {
        padding: 16px;
    }

    .inventory-history-modal-content {
        width: 98vw;
        height: 92vh;

        border-radius: 14px;
    }

    .inventory-history-modal-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .inventory-history-summary {
        padding-left: 20px;
        padding-right: 20px;
    }

    .inventory-history-table-wrap {
        margin-left: 20px;
        margin-right: 20px;
    }
}


/* =========================================================
   입고 관리 - 품목별 전체보기 상단 정보
========================================================= */

.inventory-product-history-info {
    padding: 14px 26px 16px;
    border-bottom: 1px solid #e7ebef;
}

/* 상품 / 조회 정보 */
.inventory-product-history-topline {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.4fr 0.7fr;

    gap: 16px;

    padding-bottom: 13px;
}


.inventory-product-history-item {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 0;
}

.inventory-product-history-item span {
    font-size: 12px;
    color: #8a94a5;
    white-space: nowrap;
}


.inventory-product-history-item strong {
    font-size: 13px;
    font-weight: 700;

    color: #273244;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 거래처 영역 */
.inventory-product-history-partner {
    padding-top: 10px;

    border-top: 1px solid #eef1f4;
}

.inventory-product-history-partner-title {
    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 800;

    color: #52606f;
}


/* 거래처 한 줄 */
.inventory-product-history-partner-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px 22px;

    min-height: 28px;
}


.inventory-product-history-partner-row span {
    font-size: 12px;

    color: #8a94a5;

    white-space: nowrap;
}

.inventory-product-history-partner-row strong {
    margin-left: 5px;

    font-size: 13px;
    font-weight: 700;

    color: #344054;
}


/* 주소는 조금 더 길게 사용 */
.inventory-product-history-address {
    flex: 1;
    min-width: 260px;
}

.inventory-product-history-partner-line span {
    font-size: 12px;
    color: #8a94a5;
    white-space: nowrap;
}

.inventory-product-history-partner-line strong {
    margin-left: 5px;

    font-size: 13px;
    font-weight: 700;

    color: #344054;
}


.inventory-product-history-location-line span {
    font-size: 12px;
    color: #8a94a5;
}

.inventory-product-history-location-line strong {
    font-size: 13px;
    color: #344054;
}


/* 품목별 전체보기 표 */

#inventoryInProductHistoryModal .inventory-history-table-wrap {
    margin-top: 10px;
}

#inventoryInProductHistoryModal .inventory-history-table thead th {
    font-weight: 800;
    color: #566273;
}

#inventoryInProductHistoryModal .inventory-history-table tbody td {
    height: 38px;
}

/* 수량 / 단가 / 총금액 */
#inventoryInProductHistoryModal .inventory-history-table tbody td:nth-child(4),
#inventoryInProductHistoryModal .inventory-history-table tbody td:nth-child(5),
#inventoryInProductHistoryModal .inventory-history-table tbody td:nth-child(6) {
    text-align: right;
}


#inventoryInProductHistoryModal .inventory-history-modal-content {
    position: relative;
}

#inventoryInProductHistoryModal .inventory-history-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 32px;
    height: 32px;

    border: none;
    background: transparent;

    font-size: 24px;
    line-height: 32px;

    cursor: pointer;
    z-index: 10;
}


/* =========================================================
   품목별 입고내역 표 - FreshVault Green 헤더
========================================================= */

#inventoryInProductHistoryModal .inventory-history-table thead th {
    background: #eef6f1;
    color: #2f5b48;
    font-weight: 800;

    border-top: 1px solid #d9e8df;
    border-bottom: 1px solid #d9e8df;

    padding: 4px 6px;

}


/* iPad 가로 */
@media (max-width: 1180px) {

    .inventory-product-history-topline {
        grid-template-columns: 1fr 1fr;
        gap: 10px 18px;
    }
}


/* =========================================================================================================
   출고 관리 페이지
   설명 :
   - 현재 inventoryOutPage HTML 구조에 정확히 맞춘 전용 CSS
   - 입고 관리 디자인 톤을 그대로 반영
   - 왼쪽 출고 대상 품목 영역은 입고보다 약간 넓게 설정
   - PC / iPad 가로 화면 대응
========================================================================================================= */


/* =========================================================================================================
   1. 출고 관리 전체 레이아웃
   왼쪽 : 출고 대상 품목
   오른쪽 : 선택상품 / 출고정보 입력 / 최근 출고내역
========================================================================================================= */

.inventory-out-page-layout {
    display: grid;

    /* 입고관리 260px보다 조금 넓게 */
    grid-template-columns: 280px minmax(0, 1fr);

    gap: 18px;

    /* 입고관리와 동일한 화면 높이 기준 */
    height: calc(100vh - 190px);
    min-height: 620px;

    align-items: stretch;
}


/* =========================================================================================================
   2. 왼쪽 - 출고 대상 품목 패널
========================================================================================================= */

.inventory-out-product-panel {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dde7e1;
    border-radius: 14px;

    box-shadow: 0 6px 18px rgba(20, 66, 45, 0.06);
}


/* ---------------------------------------------------------------------------------------------------------
   출고 대상 품목 헤더
--------------------------------------------------------------------------------------------------------- */

.inventory-out-product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 16px 14px;

    border-bottom: 1px solid #e8efeb;
}


/*
   현재 HTML은 제목이 <h3>가 아니라 <strong>으로 되어 있음
   따라서 strong에 직접 디자인 적용
*/
.inventory-out-product-header > div > strong {
    display: block;

    margin: 0 0 5px;

    color: #26372f;

    font-size: 16px;
    font-weight: 700;
}


.inventory-out-product-header p {
    margin: 0;

    color: #829087;

    font-size: 11px;
}


/* 등록 상품 수 */

.inventory-out-product-count {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 50px;
    height: 34px;

    padding: 0 9px;

    box-sizing: border-box;

    color: #17663c;

    font-size: 13px;
    font-weight: 700;

    background: #eaf5ef;

    border-radius: 10px;
}


/* =========================================================================================================
   3. 상품 검색
========================================================================================================= */

.inventory-out-product-search {
    padding: 12px;

    border-bottom: 1px solid #e8efeb;
}

#inventoryOutProductSearch,
#storeOutHistoryStoreSearch {
    width: 100%;
    height: 38px;

    padding: 0 12px;
    box-sizing: border-box;

    border: 1px solid #dce6e0;
    border-radius: 9px;

    outline: none;

    color: #30483c;

    font-family: inherit;
    font-size: 12px;

    background: #f8faf9;
}

#inventoryOutProductSearch:focus,
#storeOutHistoryStoreSearch:focus {
    border-color: #4b8f68;
    background: #ffffff;
}


/* =========================================================================================================
   4. 출고 대상 상품 목록
========================================================================================================= */


#inventoryOutPage .inventory-out-product-code {

    font-size: 12px;

    font-weight: 600;

    color: #8a958f;

    margin-right: 6px;

}


/* =========================================================
   매장 출고 - 선택 매장 코드 표시
========================================================= */
#storeOutSelectedStoreCode {
    display: inline-block;
    margin-top: 5px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: #7b8580;
}


.inventory-out-product-list {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding: 8px;
}


.inventory-out-product-item {
    display: block;

    width: 100%;

    margin-bottom: 3px;

    padding: 9px 12px;

    box-sizing: border-box;

    text-align: left;

    color: #20382d;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    transition: 0.18s ease;
}


.inventory-out-product-item:hover {
    background: #f2f7f4;
}


.inventory-out-product-item.active {
    background: #e9f4ed;

    border-color: #9dc5ad;
}


.inventory-out-product-item span {
    color: #20382d;

    font-size: 13px;
    font-weight: 600;
}




/* =========================================================
   매장별 출고 이력 - 왼쪽 매장 목록
   재고 이동 목록과 동일한 스타일
========================================================= */

#storeOutHistoryPage .inventory-out-product-item {
    display: block;

    width: 100%;
    margin-bottom: 3px;
    padding: 9px 12px;

    box-sizing: border-box;
    text-align: left;

    color: #20382d;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    font-family: inherit;

    transition: 0.18s ease;
}


/* 마우스 오버 */
#storeOutHistoryPage .inventory-out-product-item:hover {
    background: #f2f7f4;
}


/* 선택된 매장 */
#storeOutHistoryPage .inventory-out-product-item.active {
    background: #e9f4ed;
    border-color: #9dc5ad;
}


/* 매장 코드 */
#storeOutHistoryPage .store-out-store-code {
    display: inline;

    margin-right: 6px;

    color: #8a958f;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}



/* =========================================================
   매장 출고 / 매장별 출고 이력 - 매장명 공통
========================================================= */
#storeInventoryOutPage .store-out-store-name,
#storeOutHistoryPage .store-out-store-name {
    display: inline;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    color: #24372d;
}



/* =========================================================================================================
   5. 오른쪽 메인 영역
========================================================================================================= */

.inventory-out-main {
    min-width: 0;

    height: 100%;

    overflow-y: auto;

    padding-right: 4px;

    box-sizing: border-box;
}


/* =========================================================================================================
   6. 선택 상품 / 출고 입력 / 최근 출고내역 공통 카드
========================================================================================================= */

.inventory-out-selected-card,
.inventory-out-register-card,
.inventory-out-history-card {
    margin-bottom: 16px;

    background: #ffffff;

    border: 1px solid #dde7e1;
    border-radius: 14px;

    box-shadow: 0 6px 18px rgba(20, 66, 45, 0.06);

    box-sizing: border-box;
}


/* =========================================================================================================
   7. 선택 상품 정보 카드
========================================================================================================= */

.inventory-out-selected-card {
    padding: 20px;
}


/* 상품명 + 현재재고 상단 */

.inventory-out-selected-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


/* SELECTED PRODUCT / GOODS ISSUE */

.inventory-out-small-label {
    display: block;

    margin-bottom: 7px;

    color: #438260;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


/* 선택 상품명 */

.inventory-out-selected-top h2 {
    margin: 0 0 5px;
    color: #17382a;
    font-size: 18px;
    font-weight: 750;
}


/* 상품 코드 */

#inventoryOutSelectedCode {
    color: #87928c;

    font-size: 11px;
}


/* =========================================================================================================
   8. 현재 재고
========================================================================================================= */

.inventory-out-stock-summary {
    width: 130px;
    min-width: 130px;

    min-height: 54px;

    padding: 8px 12px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-end;

    box-sizing: border-box;
}


.inventory-out-stock-summary > span {
    display: block;

    margin-bottom: 5px;

    color: #688076;

    font-size: 10px;
}


.inventory-out-stock-summary strong {
    color: #17663c;

    font-size: 22px;
}


.inventory-out-stock-summary small {
    margin-top: 2px;

    color: #5c7167;

    font-size: 10px;
}


/* =========================================================================================================
   9. 선택 상품 상세 정보
   현재 HTML에는 정보칸마다 별도 class가 없으므로 직계 div에 적용
========================================================================================================= */

.inventory-out-selected-info {
    display: grid;

    /* 현재 출고 HTML은 6개 항목 */
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 10px;
}


.inventory-out-selected-info > div {
    min-width: 0;

    padding: 8px 12px;

    background: #f7faf8;

    border: 1px solid #e8efeb;
    border-radius: 10px;

    box-sizing: border-box;
}


.inventory-out-selected-info > div > span {
    display: block;

    margin-bottom: 6px;

    color: #839087;

    font-size: 10px;
}


.inventory-out-selected-info > div > strong {
    display: block;

    overflow: hidden;

    color: #2a4236;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================================================================
   10. 출고 정보 입력 카드
   입고 정보 입력 카드와 동일한 연한 녹색 디자인
========================================================================================================= */

.inventory-out-register-card {
    padding: 14px 18px;

    background: #EAF6ED;

    border: 1px solid #9dc5ad;

    border-radius: 14px;
}


/* =========================================================================================================
   11. 출고 정보 입력 헤더
========================================================================================================= */

.inventory-out-register-header {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    position: relative;

    margin-bottom: 17px;

    gap: 4px;
}


.inventory-out-register-header h3 {
    margin: 0 0 5px;

    color: #2a4236;

    font-size: 17px;
}


.inventory-out-register-header p {
    margin: 0;

    color: #859189;

    font-size: 11px;
}


/*
   출고 HTML에서는 GOODS ISSUE에도
   inventory-out-small-label 클래스를 사용하므로
   별도의 step-badge 클래스는 만들지 않음
*/


/* =========================================================================================================
   12. 출고 정보 입력 FORM
========================================================================================================= */

.inventory-out-form-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 8px 14px;

    align-items: end;
}


.inventory-out-field {
    min-width: 0;
}


.inventory-out-field label {
    display: block;

    margin-bottom: 7px;

    color: #4c5f56;

    font-size: 12px;
    font-weight: 700;
}


/* INPUT / SELECT */

.inventory-out-field input,
.inventory-out-field select {
    width: 100%;
    height: 39px;

    padding: 0 11px;

    box-sizing: border-box;

    border: 1px solid #dce5e0;
    border-radius: 8px;

    outline: none;

    color: #31483d;

    background: #fbfcfb;

    font-family: inherit;
    font-size: 11px;
}


.inventory-out-field input:focus,
.inventory-out-field select:focus {
    border-color: #4b8f68;

    background: #ffffff;
}


/* =========================================================================================================
   13. 출고 후 예상 재고
========================================================================================================= */

.inventory-out-stock-preview {
    min-height: 39px;

    padding: 6px 12px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    box-sizing: border-box;

    background: #f0f7f3;

    border-radius: 8px;
}


.inventory-out-stock-preview span {
    display: block;

    margin-bottom: 3px;

    color: #72847b;

    font-size: 10px;
}


.inventory-out-stock-preview strong {
    color: #173b2b;

    font-size: 18px;
}


/* =========================================================================================================
   14. 비고
   현재 HTML은 inventory-out-field-wide 사용
========================================================================================================= */

.inventory-out-field-wide {
    grid-column: span 3;
}


/* =========================================================================================================
   15. 출고 등록 버튼 영역
========================================================================================================= */

.inventory-out-register-footer {
    display: flex;

    justify-content: flex-end;

    margin-top: 8px;
}


#inventoryOutRegisterButton {
    min-width: 100px;
    height: 38px;

    padding: 0 22px;

    border: none;
    border-radius: 8px;

    background: #2f7d4f;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


#inventoryOutRegisterButton:hover {
    background: #115631;
}


/* =========================================================================================================
   16. 최근 출고 내역 카드
========================================================================================================= */

.inventory-out-history-card {
    padding: 18px 20px;
}


/* =========================================================================================================
   17. 최근 출고 내역 헤더
========================================================================================================= */

.inventory-out-history-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 17px;
}


/* 제목 + 건수 */

.inventory-out-history-title {
    display: flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;
}

/* 제목 */
.inventory-out-history-title h3 {
    margin: 0 0 5px;

    color: #2a4236;

    font-size: 17px;
}


/* 제목 아래 설명 */
.inventory-out-history-title p {
    margin: 0;

    color: #859189;

    font-size: 11px;
}


/* 최근 출고 건수 */
#inventoryOutHistoryCount {
    margin-left: 8px;
    margin-right: 12px;

    color: #1f3b2c;

    font-size: 20px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================================================================
   18. 월별 / 일별 / 연도별 / 기간별 필터
========================================================================================================= */
.inventory-out-history-filter {
    display: flex;
    align-items: center;

    gap: 8px;

    flex: 1;
}

/* 월별 / 일별 / 연도별 / 기간별 */
.inventory-out-history-filter > div > button {
    min-width: 58px;
    height: 34px;

    padding: 0 12px;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: #687970;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


.inventory-out-history-filter > div > button:hover {
    background: #e9f1ed;
}


/* 현재 선택된 조회 방식 */
.inventory-out-history-filter > div > button.active {
    background: #2f7d4f;
    color: #ffffff;
}

/* =========================================================================================================
   19. 현재 조회 표시
========================================================================================================= */
/* 현재 조회 */
.inventory-out-current-view {
    height: 34px;

    padding: 0 13px;

    display: flex;
    align-items: center;
    gap: 8px;

    margin-left: 4px;

    box-sizing: border-box;
    white-space: nowrap;
    background: #bfd7cb;
    border: 1px solid #dce5df;
    border-radius: 17px;
}


.inventory-out-current-view span {
    color: #35482e;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
}


.inventory-out-current-view strong {
    color: #42594e;

    font-size: 11px;
}


/* 앞의 작은 녹색 점 */
.inventory-out-current-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    background: #2f6b4f;
    border-radius: 50%;
}


/* "현재 조회" */
.inventory-out-current-label {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 14px;
    font-weight: 700;
    color: #35483e;

}

/* 2026년 07월 기준 */
#inventoryOutCurrentView {
    font-size: 13px;
    font-weight: 700;
    color: #35483e;

    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* =========================================================================================================
   20. 전체 상세보기 버튼
   실제 HTML ID : inventoryOutAllDetailButton
========================================================================================================= */
/* 전체 상세보기는 오른쪽 끝 */
#inventoryOutAllDetailButton {
    margin-left: 0;
    font-size: 12px;
    font-weight: 600;
    min-width: 90px;

    color: #ffffff;

    background: #426b5a;
}

#inventoryOutAllDetailButton:hover {
    background: #315746;
}


/* =========================================================================================================
   21. 최근 출고 내역 TABLE
========================================================================================================= */

.inventory-out-history-table-wrap {
    width: 100%;

    overflow-x: auto;
}


.inventory-out-history-table {
    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;
}


.inventory-out-history-table th {
    padding: 10px 8px;

    color: #3d574a;

    font-size: 12px;
    font-weight: 700;

    text-align: center;

    background: #e9f1ed;

    border-bottom: 1px solid #d6e2dc;
}


.inventory-out-history-table td {
    padding: 11px 8px;

    color: #3d574a;

    font-size: 12px;
    font-weight: 600;

    text-align: center;

    border-bottom: 1px solid #eef2ef;
}


.inventory-out-empty-row td {
    padding: 26px 8px;

    color: #98a29d;
}


/* =========================================================================================================
   22. iPad 가로 / 화면 폭 축소 대응
========================================================================================================= */

@media (max-width: 1100px) {

    .inventory-out-page-layout {

        /* 작은 화면에서는 왼쪽 폭 축소 */
        grid-template-columns: 220px minmax(0, 1fr);
    }


    .inventory-out-selected-info {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .inventory-out-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .inventory-out-field-wide {
        grid-column: span 1;
    }

    /* =========================================================================================================
       최근 출고 내역 헤더
       설명 :
       - 입고관리의 최근 입고 내역 구조를 반영
       - 제목/설명 → 건수 → 조회버튼 → 현재조회 → 전체상세보기 순서
    ========================================================================================================= */
    .inventory-out-history-header {
        display: flex;
        align-items: center;

        gap: 20px;

        margin-bottom: 17px;
    }


    /* 최근 출고 내역 제목 영역 */
    .inventory-out-history-title {
        min-width: 150px;
    }


}


/* =========================================================================================================
   23. 작은 화면
========================================================================================================= */

@media (max-width: 760px) {

    .inventory-out-page-layout {
        display: block;

        height: auto;
    }


    .inventory-out-product-panel {
        height: 310px;

        margin-bottom: 15px;
    }


    .inventory-out-selected-info,
    .inventory-out-form-grid {
        grid-template-columns: 1fr;
    }


    .inventory-out-field-wide {
        grid-column: auto;
    }
}


/* =========================================================
   출고 상세보기 모달 - 하단 버튼 정렬
   입고 상세보기와 동일한 규격 사용
========================================================= */
#inventoryOutDetailModal .inventory-detail-button-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;

    margin-top: 12px;
}


/* =========================================================
   출고 상세보기 - 닫기 / 수정 버튼 크기 통일
========================================================= */
#inventoryOutDetailCloseButton,
#inventoryOutDetailEditButton {
    min-width: 82px;
    width: auto;
    height: 34px;
    padding: 0 14px;

    border: none;
    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.18s ease;

    background: #276c4c;
    color: #ffffff;
}


/* =========================================================
   출고 상세보기 - 버튼 Hover
========================================================= */
#inventoryOutDetailCloseButton:hover,
#inventoryOutDetailEditButton:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}


/* 출고 상세보기 - 닫기/수정 버튼 간격 */
#inventoryOutDetailEditButton {
    margin-left: 12px;
}


/* 출고 수정  - 수정 모드 버튼 간격 */
#inventoryOutDetailSaveButton {
    margin-left: 12px;
}

#inventoryOutDetailDeleteButton {
    margin-left: 12px;
}


.inventory-history-table thead th {

    background: #eef7f1;

}

/* 인쇄 아이콘 */
.inventory-history-print-button i {

    margin-right: 6px;
    font-size: 13px;

}


/* =========================================================================================================
   자동 발주 추천 페이지
   AUTO ORDER RECOMMENDATION
   설명 :
   - 자동 발주 추천 페이지 전용 디자인
   - 기존 ERP 공통 CSS와 충돌하지 않도록 auto-order 클래스만 사용
========================================================================================================= */


/* =========================================================================================================
   1. 페이지 전체
========================================================================================================= */
.auto-order-container {
    width: 100%;

    padding: 8px 4px 30px;

    box-sizing: border-box;

    color: #24332b;
}


/* =========================================================================================================
   2. 상단 타이틀 영역
========================================================================================================= */
.auto-order-header {
    min-height: 96px;

    padding: 22px 26px;

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

    box-sizing: border-box;

    background: linear-gradient(
            135deg,
            #f7faf8 0%,
            #eef5f1 100%
    );

    border: 1px solid #e2ebe5;
    border-radius: 18px;

    box-shadow: 0 12px 30px rgba(36, 62, 48, 0.06);
}


.auto-order-title {
    margin: 0;

    color: #1f3328;

    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.04em;
}


.auto-order-sub {
    margin: 9px 0 0;

    color: #6b7c73;

    font-size: 14px;
    font-weight: 500;
}


/* AI ONLINE */
.auto-order-ai-status {
    height: 38px;

    padding: 0 16px;

    display: flex;
    align-items: center;
    gap: 9px;

    flex-shrink: 0;

    color: #315b45;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid #dce8e0;
    border-radius: 19px;
}


.auto-order-ai-dot {
    width: 9px;
    height: 9px;

    background: #35a267;
    border-radius: 50%;

    box-shadow: 0 0 0 5px rgba(53, 162, 103, 0.12);
}


/* =========================================================================================================
   3. 상단 요약 카드 4개
========================================================================================================= */
.auto-order-summary {
    margin-top: 16px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* =========================================================
   자동 발주 추천 - 요약 카드
========================================================= */
.auto-order-card {

    min-height: 78px;

    padding: 15px 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;

    /* 연한 FreshVault 그린 */
    background: #eef5f1;

    border: 1px solid #dbe7e0;

    border-radius: 14px;

    box-shadow: 0 8px 18px rgba(32, 54, 43, 0.06);

    transition: transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* =========================================================
   자동 발주 추천 - 카드 Hover
========================================================= */

.auto-order-card:hover {

    background: #e2eee7;

    transform: translateY(-3px);

    border-color: #cfded5;

    box-shadow: 0 14px 32px rgba(32, 54, 43, 0.10);

}

.auto-order-card span {
    color: #78877f;

    font-size: 11px;
    font-weight: 700;
}


.auto-order-card strong {
    margin-top: 8px;

    color: #23382c;

    font-size: 19px;
    font-weight: 700;
}


/* =========================================================
   자동 발주 추천 - 한 줄 안내 문구
========================================================= */
.auto-order-sub-main {
    margin: 0 0 12px;

    color: #66766e;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.01em;

    line-height: 1.5;
}


/* 왼쪽 영문 제목 */
.auto-order-sub-main strong {
    margin-right: 18px;

    color: #33483d;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.04em;
}


/* =====================================================================
   자동 발주 추천 - 매장별 품목 현황표
===================================================================== */
.auto-order-matrix-wrap {
    width: 100%;


    overflow: auto;

    padding-bottom: 8px;

    box-sizing: border-box;

    background: transparent;

    border: none;
    border-radius: 0;

    box-shadow: none;

    min-height: 180px;
    max-height: 320px;

}


.auto-order-matrix {
    width: max-content;
    min-width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    table-layout: fixed;
}


/* 공통 헤더 */
.auto-order-matrix th {
    min-width: 54px;
    height: 31px;

    padding: 0 7px;

    color: #53635b;
    font-size: 11px;
    font-weight: 800;

    text-align: center;
    white-space: nowrap;

    background: #f6f9f7;

    border-right: 1px solid #e5ebe7;
    border-bottom: 1px solid #e5ebe7;
}


/* 두 번째 줄 현재 / 추천 */
.auto-order-matrix thead tr:nth-child(2) th {
    height: 27px;

    color: #53635b;
    font-size: 10px;
    font-weight: 700;

    background: #fbfcfb;
}


/* 데이터 */
.auto-order-matrix td {
    min-width: 54px;
    height: 38px;

    padding: 0 7px;

    color: #53635b;
    font-size: 11px;
    font-weight: 650;

    text-align: center;
    white-space: nowrap;

    background: #ffffff;

    border-right: 1px solid #edf1ee;
    border-bottom: 1px solid #edf1ee;
}


/* 매장명 고정 컬럼 */
.auto-order-matrix .auto-order-matrix-store {
    position: sticky;
    left: 0;
    z-index: 3;

    min-width: 105px;
    width: 105px;

    padding: 0 13px;

    color: #2e4237;
    font-weight: 800;
    font-size: 12px;
    text-align: left;

    background: #f8faf9;

    box-shadow: 5px 0 10px rgba(35, 56, 44, 0.035);
}


/* 첫 번째 헤더의 매장 칸 */
.auto-order-matrix thead .auto-order-matrix-store {
    z-index: 5;

    text-align: center;

    background: #eef4f0;
}


/* 추천 발주 수량 */
.auto-order-matrix td.recommend {
    color: #23714a;
    font-weight: 900;

    background: #edf7f1;
}


/* 발주 대상 점 */
.auto-order-matrix-dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 7px;

    border-radius: 50%;
    vertical-align: 1px;
}


.auto-order-matrix-dot.urgent {
    background: #d84d5b;

    box-shadow: 0 0 0 4px rgba(216, 77, 91, 0.09);
}


.auto-order-matrix-dot.warning {
    background: #e4973e;

    box-shadow: 0 0 0 4px rgba(228, 151, 62, 0.10);
}


/* 행 Hover */
.auto-order-matrix tbody tr:hover td {
    background: #f7faf8;
}


.auto-order-matrix tbody tr:hover td.recommend {
    background: #e6f3eb;
}


/* =========================================================
   AUTO ORDER MATRIX
   하단 가로 스크롤 (Apple Style)
========================================================= */

.auto-order-matrix-wrap::-webkit-scrollbar {

    height: 10px;

}


.auto-order-matrix-wrap::-webkit-scrollbar-track {

    background: #f3f5f4;

    border-radius: 10px;

    margin: 0 14px;

}


.auto-order-matrix-wrap::-webkit-scrollbar-thumb {

    background: #aebbb3;

    border: 2px solid #f3f5f4;

    border-radius: 10px;

}


.auto-order-matrix-wrap::-webkit-scrollbar-thumb:hover {

    background: #66766e;

}


/* =========================================================================================================
   4. 전체 매장 현황
========================================================================================================= */

.auto-order-status {
    width: 100%;
    margin-top: 20px;
    background: #ffffff;

    border: 1px solid #d9e7dd;
    border-radius: 18px;

    box-shadow: 0 8px 24px rgba(69, 108, 84, 0.08);

    overflow: hidden;

    box-sizing: border-box;
}


.auto-order-status-header {
    min-height: 54px;

    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;

    background: linear-gradient(
            90deg,
            #3a6852 0%,
            #46765e 55%,
            #56886d 100%
    );

    border-bottom: 1px solid #1a3d2d;

    border-radius: 14px 14px 0 0;

    box-shadow: 0 6px 18px rgba(31, 75, 55, 0.25);
}


/* ===========================================
   TODAY STATUS - 전체보기
=========================================== */

.auto-order-view-all {

    margin-left: auto;

    color: rgba(255, 255, 255, 0.88);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.04em;

    cursor: pointer;

    transition: all 0.18s ease;
}

.auto-order-view-all:hover {

    color: #ffffff;

    transform: translateX(3px);
}


/* 전체 매장 현황 테이블 */
.auto-order-table {
    width: 100%;

    border-collapse: collapse;
    table-layout: fixed;
}


.auto-order-table th {
    height: 46px;

    padding: 0 18px;

    color: #718078;

    font-size: 12px;
    font-weight: 700;

    text-align: left;

    background: #fbfcfb;

    border-bottom: 1px solid #e8ece9;
}


.auto-order-table td {
    height: 54px;

    padding: 0 18px;

    color: #33463c;

    font-size: 13px;
    font-weight: 600;

    border-bottom: 1px solid #edf0ee;
}


.auto-order-table tbody tr {
    cursor: pointer;

    transition: background 0.15s ease;
}


.auto-order-table tbody tr:hover {
    background: #f3f8f5;
}


.auto-order-table tbody tr:last-child td {
    border-bottom: none;
}


/* 첫 번째 열 매장명 강조 */
.auto-order-table td:first-child {
    color: #24382d;

    font-weight: 800;
}


/* 숫자 열 우측 정렬 */
.auto-order-table th:nth-child(2),
.auto-order-table th:nth-child(4),
.auto-order-table td:nth-child(2),
.auto-order-table td:nth-child(4) {
    text-align: right;
}


/* 상태 열 가운데 정렬 */
.auto-order-table th:nth-child(3),
.auto-order-table td:nth-child(3) {
    text-align: center;
}


/* =========================================================================================================
   자동 발주 추천 - 하단 3분할 운영 현황
========================================================================================================= */

.auto-order-bottom {

    margin-top: 18px;

    width: 100%;

    display: grid;

    grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1fr)
            minmax(0, 1.55fr);

    gap: 12px;

    box-sizing: border-box;
}


/* 공통 하단 카드 */
.auto-order-notice,
.auto-order-detail {
    min-width: 0;

    background: #ffffff;

    border: 1px solid #e3e9e5;
    border-radius: 17px;

    box-shadow: 0 12px 28px rgba(32, 54, 43, 0.05);
}


/* AI NOTICE */
.auto-order-notice {
    position: relative;

    min-height: 190px;
    padding: 20px 22px;

    box-sizing: border-box;

    background: linear-gradient(
            145deg,
            #f8fbf9 0%,
            #eef6f1 100%
    );

    border: 1px solid #dce9e1;
    border-radius: 16px;

    box-shadow: 0 10px 26px rgba(36, 68, 49, 0.07);

    overflow: hidden;
}


.auto-order-notice h3,
.auto-order-detail h3 {
    margin: 0;

    color: #2a4134;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* 실시간 AI 알림 제목 */
.auto-order-notice-title {
    margin: 0;

    display: flex;
    align-items: center;
    gap: 9px;

    color: #294537;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* 기존 점의 불필요한 여백만 이 제목 안에서 제거 */
.auto-order-notice-title .page-title-ai-dot {
    flex: 0 0 auto;
    margin: 0;
}


/* 알림 목록 */
.auto-order-notice ul {
    margin: 18px 0 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* 각각의 알림 메시지 */
.auto-order-notice li {
    position: relative;

    min-height: 38px;
    padding: 10px 12px 10px 32px;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    color: #5f7067;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;

    background: rgba(255, 255, 255, 0.74);

    border: 1px solid rgba(218, 231, 223, 0.88);
    border-radius: 11px;
}


/* 메시지 앞 작은 상태 표시 */
.auto-order-notice li::before {
    content: "";

    position: absolute;
    left: 13px;
    top: 50%;

    width: 6px;
    height: 6px;

    background: #e3a74d;
    border-radius: 50%;

    transform: translateY(-50%);

    box-shadow: 0 0 0 4px rgba(227, 167, 77, 0.10);
}


/* 마우스를 올렸을 때 */
.auto-order-notice li:hover {
    color: #354c40;

    background: #ffffff;

    border-color: #cddfd4;

    transform: translateX(2px);

    transition: transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}


.auto-order-notice li:last-child {
    border-bottom: none;
}


/* =========================================================================================================
   자동 발주 추천 - WAREHOUSE STATUS
   설명 :
        - 자동 발주 실행 전 본사 창고 재고 준비 상태 표시
        - 전체 준비율과 주요 품목군별 상태 제공
========================================================================================================= */

.auto-order-warehouse {
    min-width: 0;
    min-height: 205px;

    padding: 18px 19px;

    box-sizing: border-box;

    background: linear-gradient(
            145deg,
            #fbfcfb 0%,
            #f2f7f4 100%
    );

    border: 1px solid #e0e9e3;
    border-radius: 15px;

    box-shadow: 0 8px 22px rgba(35, 61, 47, 0.05);
}


/* 하단 카드 공통 제목 */
.auto-order-bottom-title {
    margin: 0;

    color: #30463a;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* 출고 준비율 */
.warehouse-ready-summary {
    margin-top: 16px;

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


.warehouse-ready-label {

    font-weight: 650;
    color: #333;
    font-size: 12px;

}


.warehouse-ready-value {
    color: #315f47;

    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}


/* 준비율 바 */
.warehouse-progress {

    width: 100%;

    height: 4px;

    margin-top: 12px;

    overflow: hidden;

    background: #f1f5f2;

    border-radius: 999px;

}

.warehouse-progress span {

    display: block;

    height: 100%;

    background: linear-gradient(
            90deg,
            #8eb59b 0%,
            #6f977d 100%
    );

    border-radius: inherit;

}


/* 품목별 상태 목록 */
.warehouse-status-list {
    margin-top: 15px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}


.warehouse-status-row {
    min-height: 28px;

    display: grid;

    grid-template-columns:
            minmax(0, 1fr)
            42px
            44px;

    align-items: center;
    gap: 8px;

    color: #5f6f67;

    font-size: 11px;
}


.warehouse-item-name {
    overflow: hidden;

    font-weight: 650;
    color: #333;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.warehouse-status-row strong {


    font-size: 11px;
    font-weight: 800;

    text-align: right;
}


/* 상태 Badge */
.warehouse-status-badge {
    min-width: 40px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    font-size: 9px;
    font-weight: 800;

    border-radius: 999px;
}


.warehouse-status-badge.normal {
    color: #347052;

    background: #edf7f1;

    border: 1px solid #d3e8da;
}


.warehouse-status-badge.warning {
    color: #9a6b23;

    background: #fff7e8;

    border: 1px solid #f0dfbb;
}


.warehouse-status-badge.shortage {
    color: #a2494f;

    background: #fff0f1;

    border: 1px solid #efd4d7;
}


/* =========================================================
   iPad 가로 및 작은 PC
========================================================= */

@media (max-width: 1250px) {

    .auto-order-bottom {
        grid-template-columns:
                minmax(0, 0.85fr)
                minmax(0, 0.95fr)
                minmax(0, 1.35fr);

        gap: 9px;
    }


    .auto-order-notice,
    .auto-order-warehouse,
    .auto-order-detail {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* ORDER DETAIL */
.auto-order-detail {
    padding: 22px;

    box-sizing: border-box;
}


/* 품목이 많아도 카드 전체가 너무 길어지지 않도록 내부 스크롤 */
.auto-order-detail-table {
    width: 100%;

    margin-top: 18px;

    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}


/*
   HTML 구조를 바꾸지 않고 테이블 영역에 스크롤을 주기 위한 설정
   thead는 위에 고정되고 tbody만 스크롤됨
*/
.auto-order-detail-table thead,
.auto-order-detail-table tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
}


.auto-order-detail-table tbody {
    display: block;

    max-height: 380px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: #c8d4cd transparent;
}


.auto-order-detail-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}


.auto-order-detail-table th {
    height: 44px;

    padding: 0 14px;

    color: #74827a;

    font-size: 12px;
    font-weight: 700;

    text-align: center;

    background: #f6f9f7;

    border-top: 1px solid #e7ece9;
    border-bottom: 1px solid #e7ece9;
}


.auto-order-detail-table th:first-child {
    text-align: left;

    border-left: 1px solid #e7ece9;
    border-radius: 10px 0 0 10px;
}


.auto-order-detail-table th:last-child {
    border-right: 1px solid #e7ece9;
    border-radius: 0 10px 10px 0;
}


.auto-order-detail-table td {
    height: 48px;

    padding: 0 14px;

    color: #3d4f45;

    font-size: 13px;
    font-weight: 600;

    text-align: center;

    border-bottom: 1px solid #edf0ee;
}


.auto-order-detail-table td:first-child {
    color: #263c30;

    font-weight: 800;
    text-align: left;
}


/* 현재 재고 */
.auto-order-detail-table td:nth-child(2) {
    color: #d17b2e;

    font-weight: 800;
}


/* 추천 발주 */
.auto-order-detail-table td:nth-child(4) {
    color: #26734d;

    font-weight: 800;
}


/* 테이블 스크롤바 */
.auto-order-detail-table tbody::-webkit-scrollbar {
    width: 7px;
}


.auto-order-detail-table tbody::-webkit-scrollbar-thumb {
    background: #ccd7d1;
    border-radius: 10px;
}


.auto-order-detail-table tbody::-webkit-scrollbar-track {
    background: transparent;
}


/* =========================================================================================================
   6. 하단 버튼
========================================================================================================= */
.auto-order-button-wrap {
    margin-top: 18px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


.auto-order-button {
    min-width: 112px;
    height: 42px;

    padding: 0 18px;

    border: 1px solid #d8e1dc;
    border-radius: 11px;

    background: #ffffff;

    color: #42554b;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition: background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}


.auto-order-button:hover {
    background: #f1f6f3;
    border-color: #cbd8d1;
}


.auto-order-button:active {
    transform: translateY(1px);
}


/* 메인 버튼 */
.auto-order-button-main {
    min-width: 132px;

    color: #ffffff;

    background: #2f6f4f;
    border-color: #2f6f4f;

    box-shadow: 0 9px 18px rgba(47, 111, 79, 0.18);
}


.auto-order-button-main:hover {
    color: #ffffff;

    background: #285f44;
    border-color: #285f44;
}


/* =========================================================================================================
   7. iPad 가로 / 작은 PC 대응
========================================================================================================= */
@media (max-width: 1180px) {

    .auto-order-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .auto-order-bottom {
        grid-template-columns:
            minmax(220px, 0.75fr)
            minmax(0, 2.25fr);
    }


    .auto-order-title {
        font-size: 21px;
    }
}


/* =========================================================================================================
   8. 좁은 화면 대응
========================================================================================================= */
@media (max-width: 860px) {

    .auto-order-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .auto-order-summary {
        grid-template-columns: 1fr;
    }


    .auto-order-bottom {
        grid-template-columns: 1fr;
    }


    .auto-order-button-wrap {
        flex-wrap: wrap;
    }


    .auto-order-button {
        flex: 1;
    }
}


/* =========================================================
   자동 발주 추천 - 제목 옆 AI ONLINE 강조
========================================================= */

.page-title-ai-online {
    height: 32px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 30px;

    color: #245c3f;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;

    background: linear-gradient(
            135deg,
            #f7fbf8 0%,
            #e9f5ee 100%
    );

    border: 1px solid #bdd7c7;
    border-radius: 999px;

    box-shadow: 0 6px 14px rgba(37, 94, 63, 0.12);

    white-space: nowrap;
}


.page-title-ai-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    background: #32a467;
    border-radius: 50%;

    box-shadow: 0 0 0 5px rgba(50, 164, 103, 0.14),
    0 0 10px rgba(50, 164, 103, 0.34);
}


/* =========================================================================================================
   자동 발주 추천 - 배송 그룹 상세보기 버튼
========================================================================================================= */

.delivery-group-view-button {
    min-width: 48px;
    height: 28px;

    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #3f6651;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;

    background: #f3f8f5;

    border: 1px solid #d7e5dc;
    border-radius: 999px;

    cursor: pointer;

    transition: background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


/* 마우스를 올렸을 때 */
.delivery-group-view-button:hover {
    color: #ffffff;

    background: #4f7d64;

    border-color: #4f7d64;

    transform: translateY(-1px);

    box-shadow: 0 5px 12px rgba(45, 92, 66, 0.18);
}


/* 버튼을 눌렀을 때 */
.delivery-group-view-button:active {
    transform: translateY(0);

    box-shadow: 0 2px 6px rgba(45, 92, 66, 0.12);
}







/* =========================================================
   사용자 매뉴얼
========================================================= */
.user-manual-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 720px;

    background: #ffffff;
    border: 1px solid #e7e7e7;
    border-radius: 20px;

    overflow: hidden;
}


/* 왼쪽 목차 */
.user-manual-sidebar {
    padding: 28px 18px;

    background: #f7f7f8;
    border-right: 1px solid #e8e8e8;
}


.user-manual-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 10px 24px;
}


.user-manual-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: #111111;
    color: #ffffff;

    border-radius: 11px;

    font-size: 18px;
}


.user-manual-brand strong {
    display: block;

    font-size: 15px;
    font-weight: 700;
    color: #1d1d1f;
}


.user-manual-brand p {
    margin: 4px 0 0;

    font-size: 11px;
    color: #86868b;
}


.user-manual-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.user-manual-menu-item {
    width: 100%;

    padding: 11px 13px;

    background: transparent;
    border: 0;
    border-radius: 9px;

    text-align: left;

    font-size: 13px;
    font-weight: 500;
    color: #122019;
    transition:0.2s;
    cursor: pointer;
}


.user-manual-menu-item:hover {
    background: #eef8f1;
    color: #1d1d1f;
}


.user-manual-menu-item.active {

    color:#1f3b2d;

    background:  #e6efe9;

    font-weight: 700;

}


/* 오른쪽 내용 */
.user-manual-content {
    padding: 14px 48px 60px;

    background: #ffffff;
}


.user-manual-topbar {
    display: none;
}


.user-manual-eyebrow {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;

    color: #86868b;
}


.user-manual-topbar h2 {
    margin: 0;

    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.04em;

    color: #1d1d1f;
}


.user-manual-topbar p {
    margin: 12px 0 0;

    font-size: 15px;
    line-height: 1.7;

    color: #6e6e73;
}


.user-manual-version {
    padding: 8px 12px;

    background: #f5f5f7;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;
    color: #6e6e73;

    white-space: nowrap;
}


.user-manual-body {
    padding-top: 0;
}


.user-manual-hero-card {
    padding: 20px;

    background: none;
    border-radius: 18px;
}


.user-manual-step-label {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;

    color: #86868b;
}


.user-manual-hero-card h3 {
    margin: 0;

    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;

    color: #245c3f;
}


.user-manual-hero-card p {
    max-width: 680px;

    margin: 14px 0 0;

    font-size: 15px;
    line-height: 1.8;

    color: #6e6e73;
}



.user-manual-step-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;

    margin-top: 0;
}


/* 01 필요한 정보 입력 */
.user-manual-step-card:first-child {
    min-height: 150px;
}

/* 02 저장 및 결과 확인 */
.user-manual-step-card:last-child {
    min-height: 360px;
}



/* =========================================================
   사용자 매뉴얼 작성 영역
========================================================= */
.manual-write-area {
    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 16px 18px;
}


/* 제목 / 내용 한 줄 */
.manual-write-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.manual-write-field label {
    font-size: 12px;
    font-weight: 700;
    color: #526158;
}


/* 매뉴얼 제목 입력 */
.manual-title-input {
    width: 100%;
    height: 42px;

    padding: 0 14px;

    border: 1px solid #dfe8e2;
    border-radius: 10px;

    background: #ffffff;

    font-size: 12px;
    font-weight: 400;
    color: #b8c0ba;

    box-sizing: border-box;
    outline: none;
}


.manual-title-input:focus {
    border-color: #8eb39b;
}


/* 매뉴얼 내용 입력 */
.manual-write-area .manual-content {
    min-height: 100px;

    padding: 13px 14px;

    border: 1px solid #dfe8e2;
    border-radius: 10px;

    background: #ffffff;

    font-size: 14px;
    line-height: 1.8;
    color: #3f4742;

    box-sizing: border-box;
    outline: none;
}


/* 내용이 비어 있을 때 안내 문구 */
.manual-content:empty::before {
    content: attr(data-placeholder);
    color: #a5ada8;
}





/* 위쪽 입력 영역 */
.user-manual-step-card:first-child .manual-content {
    min-height: 80px;
}

/* 아래쪽 축적 영역 */
.user-manual-step-card:last-child .manual-content {
    min-height: 290px;
}







.user-manual-step-card {
    display: flex;
    flex-direction: column;
    gap: 0;

    min-height: 220px;
    padding: 0;

    border: 1px solid #e8e8e8;
    border-radius: 16px;

    background: #ffffff;
    overflow: hidden;
}





.user-manual-card-header h4{

    margin:0;

    font-size:15px;

    font-weight:700;

    color:#1d1d1f;

}



.user-manual-step-card p {
    margin: 10px 0 0;

    font-size: 13px;
    line-height: 1.7;

    color: #6e6e73;
}


/*.manual-editor{

    width:100%;
    height:260px;

    margin-top:12px;

    padding:12px;

    border:1px solid #d9e3dc;
    border-radius:10px;

    resize:none;

    font-size:14px;
    line-height:1.7;

    outline:none;

    background:#ffffff;

    box-sizing:border-box;

}*/


/* 사용자 매뉴얼 제목 실제 입력 글자 */
.manual-title-input {
    color: #2f3431;
    font-weight: 500;
    font-size:13px;
}

/* 사용자 매뉴얼 제목 안내문 */
.manual-title-input::placeholder {
    color: #aeb5b0;
    font-weight: 400;
    font-size:12px;
}


/* 사용자 매뉴얼 내용 실제 입력 글자 */
#manualStep1Content {
    color: #2f3431;
    font-weight: 500;
    font-size:13px;
}

/* 내용 입력 안내문 */
#manualStep1Content:empty::before {
    color: #aeb5b0;
    font-weight: 400;
    font-size:12px;
}





.manual-editor:focus{

    border-color:#2d6b45;

}


.user-manual-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 18px;

    background: #e6efe9;
    border-bottom: 1px solid #e6ebe7;
}




.user-manual-step-number{

    font-size:14px;

    font-weight:800;

    color:#5b7565;

}


.user-manual-card-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}



.user-manual-header-save-button,
.user-manual-result-edit-button,
.user-manual-result-save-button,
.user-manual-result-delete-button {

    height:32px;
    padding:0 14px;

    border:1px solid #cbdcd1;
    border-radius:8px;

    background:#ffffff;

    font-size:12px;
    font-weight:700;
    color:#315c43;

    cursor:pointer;

}



.user-manual-header-save-button:hover,
.user-manual-result-edit-button:hover,
.user-manual-result-save-button:hover,
.user-manual-result-delete-button:hover {

    background:#e4f0e8;

}


.user-manual-result-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}





/* 평상시부터 같은 크기와 여백을 유지 */
.manual-content {
    min-height: 170px;
    padding: 16px;

    border: 1px solid transparent;
    border-radius: 10px;

    box-sizing: border-box;
    outline: none;
}


/* =========================================================
   오른쪽에 저장된 사용자 매뉴얼 목록
   - 저장할 때마다 하나의 컬럼 카드로 세로 축적
========================================================= */
#manualStep2Content {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 16px;
    box-sizing: border-box;
}


/* 저장된 매뉴얼 한 건 */
.user-manual-published-item {
    width: 100%;

    padding: 16px 18px;

    background: #ffffff;
    border: 1px solid #dfe8e2;
    border-radius: 12px;

    box-sizing: border-box;

    font-size: 14px;
    line-height: 1.8;
    color: #3f4742;
}





/* 평상시에는 선택 동그라미 숨김 */
.user-manual-select-radio {
    display: none;
    flex-shrink: 0;
}


/* 편집 버튼을 누르면 선택 동그라미 표시 */
#manualStep2Content.select-mode
.user-manual-select-radio {
    display: block;
}


/* 저장된 매뉴얼 한 건 */
.user-manual-published-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: 100%;
    padding: 16px 18px;

    background: #ffffff;
    border: 1px solid #dfe8e2;
    border-radius: 12px;

    box-sizing: border-box;
}


/* 제목과 내용 영역 */
.user-manual-published-body {
    flex: 1;
    min-width: 0;
}




.user-manual-document-info {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-left: 18px;

    font-size: 11px;
    color: #8a958e;
}

.user-manual-document-info > strong {
    color: #315c43;
    font-size: 12px;
    font-weight: 700;
}

.user-manual-document-info span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.user-manual-document-info b {
    color: #5e6962;
    font-weight: 700;
}



/* =========================================================
   사용자 매뉴얼 웰컴 - 책 표지 디자인
========================================================= */

.user-manual-welcome {
    min-height: 500px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 70px;
    background: #ffffff;
}


/* 책 전체 */
.user-manual-book {
    position: relative;

    width: 280px;
    height: 390px;

    margin-bottom: 28px;

    border-radius: 5px 14px 14px 5px;

    background: #284d3a;

    box-shadow:
            0 15px 30px rgba(0,0,0,.08),
            0 45px 80px rgba(0,0,0,.14);
    overflow: hidden;
}


/* 책 등 부분 */
.user-manual-book-spine {
    position: absolute;
    top: 0;
    left: 0;

    width: 18px;
    height: 100%;

    background: #1f3f2f;

    box-shadow:
            0 12px 25px rgba(0,0,0,.08),
            0 35px 70px rgba(0,0,0,.15);
}


/* 책 표지 내용 */
.user-manual-book-cover {
    height: 100%;

    padding: 34px 28px 28px 42px;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}


/* 상단 작은 라벨 */
.user-manual-book-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;

    color: rgba(255,255,255,0.62);
}


/* 메인 제목 */
.user-manual-book-cover h2 {
    margin: 54px 0 0;

    font-size: 42px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;

    color: #ffffff;
}


/* 서브 제목 */
.user-manual-book-cover p {
    margin: 12px 0 0;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;

    color: rgba(255,255,255,0.68);
}


/* 구분선 */
.user-manual-book-line {
    width: 34px;
    height: 1px;

    margin-top: auto;
    margin-bottom: 14px;

    background: rgba(255,255,255,0.35);
}


/* 하단 문구 */
.user-manual-book-cover small {
    font-size: 9px;
    line-height: 1.5;
    letter-spacing: 0.05em;

    color: rgba(255,255,255,0.52);
}


/* 하단 안내 */

.user-manual-welcome-guide{

    margin-top:18px;

    font-size:14px;

    font-weight:500;

    color:#6b7280;

    letter-spacing:0.02em;

}



/* =========================================================
   사용자 매뉴얼 저장 결과 카드
========================================================= */

.manual-result-item {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 12px;
    padding: 18px 20px;

    background: #ffffff;
    border: 1px solid #e4e9e5;
    border-radius: 12px;

    transition:
            border-color 0.18s ease,
            background 0.18s ease,
            box-shadow 0.18s ease;
}


/* 선택된 매뉴얼 카드 */
.manual-result-item.selected {
    background: #f3f8f5;
    border-color: #94ad9e;

    box-shadow:
            0 4px 14px rgba(49, 92, 67, 0.08);
}


/* 제목과 내용 영역 */
.manual-result-text {
    min-width: 0;
    flex: 1;
}

.manual-result-title {
    display: block;

    margin-bottom: 8px;

    font-size: 15px;
    font-weight: 700;

    color: #222a25;
}

/* 저장 메뉴얼텍스트*/
.manual-result-content {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;

    color: #343a36;

    word-break: keep-all;
}


/* 기본 상태에서는 선택 동그라미 숨김 */
.manual-result-select {
    display: none;

    flex: 0 0 auto;

    padding-top: 2px;

    cursor: pointer;
}


/* 편집 버튼을 누른 뒤 표시 */
.manual-result-select.show {
    display: block;
}


/* 실제 radio 버튼 숨김 */
.manual-result-select input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* 사용자에게 보이는 동그라미 */
.manual-result-radio {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    border: 1.5px solid #aab5ae;
    border-radius: 50%;

    background: #ffffff;
}


/* 선택된 동그라미 내부 표시 */
.manual-result-select input:checked
+ .manual-result-radio {
    border-color: #315c43;
}


.manual-result-select input:checked
+ .manual-result-radio::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #315c43;

    transform: translate(-50%, -50%);
}


/* 저장 결과가 없을 때 */
.manual-result-empty {
    padding: 28px 20px;

    text-align: center;

    font-size: 13px;
    color: #9aa29d;
}


/* 편집 중 신규 저장 버튼 비활성화 */
.user-manual-header-save-button.disabled,
.user-manual-header-save-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}


/* =========================================================
   사용자 매뉴얼 Q&A 답변 표시
========================================================= */
.manual-result-answer-label {
    margin-right: 6px;

    color: #5f8f73;
    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   사용자 매뉴얼 질문(Q) 표시
========================================================= */
.manual-result-question-label {

    margin-right: 6px;

    color: #2f6b4e;

    font-weight: 800;

}



/* =========================================================
   사용자 매뉴얼 최종 승인 날짜
========================================================= */

.manual-result-date {
    margin-top: 10px;

    font-size: 11px;
    font-weight: 400;

    color: #909792;
}




/* ==========================================================
   매장별 재고 현황
========================================================== */

.store-summary-wrap{

    display:flex;
    gap:18px;

    margin-top:22px;
    margin-bottom:24px;

}

.store-summary-card{

    flex:1;

    background:#ffffff;

    border:1px solid #e5ebe7;

    border-radius:12px;

    padding:18px 22px;

}

.store-summary-card .summary-label{

    display:block;

    font-size:12px;

    color:#8d948f;

    margin-bottom:8px;

}

.store-summary-card strong{

    font-size:26px;
    font-weight:700;
    color:#2f3430;

}


/* =========================================================
   매장별 재고 현황 - 녹색 헤더 검색 영역
========================================================= */

.store-inventory-status-header {
    gap: 18px;
}


/* 왼쪽 영문 제목 */
.store-inventory-status-title {
    flex-shrink: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
}


/* 오른쪽 검색 전체 */
.store-inventory-header-search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;

    min-width: 0;
}


/* 입력창과 선택창 */
.store-inventory-header-search input,
.store-inventory-header-search select {
    height: 30px;

    padding: 0 10px;

    box-sizing: border-box;

    color: #33463c;

    font-size: 11px;
    font-weight: 600;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 7px;

    outline: none;
}


/* 매장명 */
#storeInventorySearchName {
    width: 125px;
}


/* 매장코드 */
#storeInventorySearchCode {
    width: 105px;
}


/* 그룹 선택 */
#storeInventoryGroup {
    width: 100px;
}


/* 검색 버튼 */
.store-inventory-search-button,
.store-inventory-reset-button {
    height: 30px;

    padding: 0 12px;

    color: #315b45;

    font-size: 11px;
    font-weight: 800;

    background: #ffffff;

    border: none;
    border-radius: 7px;

    cursor: pointer;
}


/* 전체보기 버튼 */
.store-inventory-reset-button {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.16);

    border: 1px solid rgba(255, 255, 255, 0.48);
}


.store-inventory-search-button:hover {
    background: #edf5f0;
}


.store-inventory-reset-button:hover {
    background: rgba(255, 255, 255, 0.25);
}



/* =========================================================
   매장별 재고 현황 - 검색 컨트롤 너비
========================================================= */

#storeInventorySearchName {
    width: 160px;
}

#storeInventorySearchCode {
    width: 145px;
}

#storeInventoryGroup {
    width: 135px;
}

/* =========================================================
   매장별 / 창고별 재고 현황 전용 테이블 영역
   - 다른 페이지에는 영향 없음
   - 세로 높이 580px 유지
   - 품목이 많아지면 테이블 내부 가로 스크롤
========================================================= */



#storeInventoryStatusPage .auto-order-matrix-wrap,
#areaInventoryStatusPage .auto-order-matrix-wrap {

    width: 100%;

    min-height: 580px;
    max-height: 580px;

    overflow-x: auto;
    overflow-y: auto;

    box-sizing: border-box;
}


/* =========================================================
   창고별 재고 현황
   - 품목 증가 시 테이블이 오른쪽으로 자동 확장
========================================================= */

#areaInventoryStatusPage .auto-order-matrix {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

/* =========================================================
   창고별 재고 현황
   - 각 품목 열 최소 너비 유지
   - 품목명이 줄바꿈되지 않도록 처리
========================================================= */

#areaInventoryStatusPage .auto-order-matrix th,
#areaInventoryStatusPage .auto-order-matrix td {

    width: 110px;
    min-width: 110px;

    white-space: nowrap;

    box-sizing: border-box;
}


/* =========================================================
   창고별 첫 번째 열 = 창고명
   - 좌우 스크롤해도 A창고 / B창고 등이 화면에 고정
========================================================= */

#areaInventoryStatusPage .auto-order-matrix th:first-child,
#areaInventoryStatusPage .auto-order-matrix td:first-child {

    position: sticky;
    left: 0;

    width: 100px;
    min-width: 100px;

    background: #ffffff;

    z-index: 5;
}


/* =========================================================
   창고별 재고 현황 전용
   - 다른 페이지 영향 없음
   - 품목 증가 시 가로 스크롤 생성
========================================================= */

#areaInventoryStatusPage .auto-order-matrix {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

#areaInventoryStatusPage .auto-order-matrix th,
#areaInventoryStatusPage .auto-order-matrix td {
    min-width: 110px;
    width: 110px;
    white-space: nowrap;
}




/* =========================================================
   창고별 왼쪽 상단 창고명 헤더
   - 일반 창고 행보다 위에 표시
========================================================= */

#areaInventoryStatusPage .auto-order-matrix thead th:first-child {

    z-index: 6;
}


/* =========================================================
  창고별  매장 출고 품목 구성 카드 전체
========================================================= */
#storeInventoryOutPage .store-out-product-card {

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(59, 91, 73, 0.12);

    border-radius: 18px;

    padding: 24px;

    box-shadow:
            0 12px 30px rgba(25, 55, 39, 0.06);

}


/* =========================================================
   카드 상단 제목
========================================================= */
#storeInventoryOutPage .store-out-card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;

}


#storeInventoryOutPage .store-out-eyebrow {

    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.14em;

    color: #4f7862;

}


#storeInventoryOutPage .store-out-card-header h3 {

    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #26372f;

}


#storeInventoryOutPage .store-out-card-header p {

    margin: 7px 0 0;
    color: #7b8981;
    font-size: 11px;
    line-height: 1.5;

}

/* =========================================================
   매장 출고 입력칸 한 줄 정렬
========================================================= */
#storeInventoryOutPage .store-out-product-form {
    display: grid;

    grid-template-columns:
        minmax(260px, 1.6fr)      /* 상품 검색 */
        minmax(110px, 1fr)    /* 출고창고 */
        minmax(110px, 1fr)    /* 출고수량 */
        minmax(150px, 1fr)      /* 공급단가 */
        82px;                   /* 품목 추가 */

    gap: 10px;
    align-items: end;
}

/* 각 입력칸 구조 통일 */
#storeInventoryOutPage .store-out-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* 라벨 높이 통일 */
#storeInventoryOutPage .store-out-field label {
    display: block;
    height: 16px;
    margin: 0;

    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}


#storeInventoryOutPage .store-out-field input {

    width: 100%;

    height: 43px;

    box-sizing: border-box;

    padding: 0 13px;

    border: 1px solid #dbe6df;

    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: #24382d;

    font-size: 12px;

}
/* 입력창 높이 통일 */
#storeInventoryOutPage .store-out-field input,
#storeInventoryOutPage .store-out-product-dropdown {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
}


#storeInventoryOutPage .store-out-field input::placeholder {

    color: #a0aaa4;

}


#storeInventoryOutPage .store-out-field input:focus {

    border-color: #759b83;

    box-shadow:
            0 0 0 3px rgba(77, 124, 94, 0.10);

}


/* =========================================================
   상품 검색 결과
========================================================= */
#storeInventoryOutPage .store-out-search-result {

    position: absolute;

    top: calc(100% + 6px);

    left: 0;

    right: 0;

    z-index: 30;

    max-height: 220px;

    overflow-y: auto;

    border: 1px solid #dce6df;

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
            0 14px 28px rgba(31, 60, 43, 0.12);

}
/* =========================================================
   매장 출고
   품목 추가 버튼 최종 정리
========================================================= */
#storeInventoryOutPage .store-out-add-button {

    align-self: end;

    width: 82px;
    height: 35px;

    min-width: 76px;
    padding: 0 13px;

    border: 1px solid #bfd0c6;
    border-radius: 8px;

    background: #e4f0e8;
    color: #263c31;

    position: relative;
    top: -2px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1;

    cursor: pointer;
    transition: 0.16s ease;
}

#storeInventoryOutPage .store-out-add-button:hover {
    border-color: #a8bdb1;
    background: #ccddd4;
    color: #344f42;
}

#storeInventoryOutPage .store-out-add-button:active {
    transform: translateY(1px);
}


/* =========================================================
   출고 예정 품목 영역
========================================================= */
#storeInventoryOutPage .store-out-draft-section {

    margin-top: 18px;

    overflow: hidden;

    border: 1px solid #e2eae5;

    border-radius: 15px;

    background: #ffffff;

}


/* =========================================================
   출고 예정 품목 상단
========================================================= */
#storeInventoryOutPage .store-out-draft-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 15px 17px;

    border-bottom: 1px solid #e7ede9;

    background: #fafcfb;

}


#storeInventoryOutPage .store-out-draft-header > div {

    display: flex;

    align-items: center;

    gap: 10px;

}


#storeInventoryOutPage .store-out-draft-header strong {

    color: #263c31;

    font-size: 13px;

    font-weight: 800;

}


#storeInventoryOutPage .store-out-draft-header span {

    color: #8b9690;

    font-size: 11px;

}


/* =========================================================
   출고 예정 품목 테이블
========================================================= */
#storeInventoryOutPage .store-out-draft-table-wrap {

    overflow-x: auto;

}


#storeInventoryOutPage .store-out-draft-table {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

}


#storeInventoryOutPage .store-out-draft-table th {

    padding: 13px 12px;

    border-bottom: 1px solid #e9eeeb;

    background: #f6f9f7;

    color: #647168;

    font-size: 11px;

    font-weight: 800;

    text-align: center;

}


#storeInventoryOutPage .store-out-draft-table td {

    padding: 13px 12px;

    border-bottom: 1px solid #edf1ee;

    color: #33453b;

    font-size: 11px;

    text-align: center;

}


#storeInventoryOutPage .store-out-empty-row td {

    height: 84px;

    color: #9aa49e;

}


/* =========================================================
   하단 총 공급금액 및 등록 버튼
========================================================= */
#storeInventoryOutPage .store-out-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid #e6ece8;

}


#storeInventoryOutPage .store-out-footer > div span {

    display: block;

    margin-bottom: 5px;

    color: #859088;

    font-size: 10px;

    font-weight: 700;

}


#storeInventoryOutPage .store-out-footer > div strong {

    color: #244533;

    font-size: 21px;

    font-weight: 850;

}




/* =========================================================
   매장 출고
   상품 검색 드롭다운 최종 정리
========================================================= */

/* 검색창과 버튼을 감싸는 기준 영역 */
#storeInventoryOutPage .store-out-product-dropdown {
    position: relative;

    width: 100%;
    height: 38px;
}

/* 검색 입력창 */
#storeInventoryOutPage #storeOutProductSearch {
    width: 100%;
    height: 38px;

    padding: 0 42px 0 12px;

    box-sizing: border-box;

    border: 1px solid #dce4df;
    border-radius: 9px;

    outline: none;
    background: #ffffff;

    font-size: 12px;
    color: #2d3d35;
}

/* 오른쪽 삼각형 버튼 */
#storeInventoryOutPage .store-out-product-arrow {
    position: absolute;

    top: 50%;
    right: 6px;

    transform: translateY(-50%);

    width: 28px;
    height: 28px;
    min-width: 28px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #52675b;

    font-size: 10px;
    line-height: 28px;
    text-align: center;

    cursor: pointer;
    z-index: 5;
}

/* 버튼 호버 */
#storeInventoryOutPage .store-out-product-arrow:hover {
    background: #edf3ef;
}

/* 펼쳐지는 상품 목록 */
#storeInventoryOutPage .store-out-search-result {
    position: absolute;

    top: calc(100% + 5px);
    left: 0;
    right: 0;

    width: 100%;
    max-height: 220px;

    overflow-y: auto;

    padding: 5px;
    box-sizing: border-box;

    border: 1px solid #dce5df;
    border-radius: 9px;

    background: #ffffff;
    box-shadow: 0 10px 24px rgba(38, 58, 48, 0.14);

    z-index: 50;
}





#storeInventoryOutPage .store-out-search-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    align-items: center;

    width: 100%;
    min-height: 38px;
    padding: 8px 12px;

    border: 0;
    border-radius: 7px;
    background: #ffffff;

    color: #32443a;
    text-align: left;
    cursor: pointer;
}

#storeInventoryOutPage .store-out-search-item:hover {
    background: #edf4f0;
}

#storeInventoryOutPage .store-out-search-item span {
    font-size: 11px;
    color: #728078;
}

#storeInventoryOutPage .store-out-search-item strong {
    font-size: 12px;
    font-weight: 700;
    color: #2f4037;
}


/* =========================================================
   매장 출고 - 삭제 버튼
========================================================= */
#storeInventoryOutPage .store-out-delete-button {

    height: 32px;
    min-width: 52px;
    padding: 0 12px;

    border: 1px solid #cbdcd1;
    border-radius: 8px;

    background: #ffffff;

    color: #315c43;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
            background 0.16s ease,
            border-color 0.16s ease,
            transform 0.16s ease;
}

#storeInventoryOutPage .store-out-delete-button:hover {

    background: #e4f0e8;

    border-color: #8fb29d;

    transform: translateY(-1px);
}




/* =========================================================
   매장 출고 등록 버튼
========================================================= */
#storeInventoryOutPage #storeOutRegisterButton {

    min-width: 110px;

    height: 37px;

    border: 0;

    border-radius: 10px;

    background: #234f3a;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition:
            transform 0.16s ease,
            background 0.16s ease;
}

#storeInventoryOutPage #storeOutRegisterButton:hover {

    background: #183d2b;

    transform: translateY(-1px);
}



/* =========================================================
   iPad 가로 및 좁은 화면 대응
========================================================= */
@media (max-width: 1180px) {

    #storeInventoryOutPage .store-out-product-form {

        grid-template-columns:
            minmax(240px, 1.5fr)
            minmax(120px, 1fr)
            minmax(140px, 1fr);

    }


    #storeInventoryOutPage .store-out-add-button {

        grid-column: 1 / -1;

        width: 100%;

    }

}



/* =========================================================
   매장 출고(STORE OUT) 왼쪽 매장 목록 전용 글자
   - 다른 페이지에는 영향 없음
========================================================= */
#storeInventoryOutPage .store-out-store-code {
    font-size: 13px;
    color: #8a958f;
    font-weight: 600;
}






/* =========================================================
   매장 출고(STORE OUT) - 왼쪽 매장 검색 영역
   - 매장 출고 페이지에만 적용
   - 검색창과 버튼 크기 축소
   - 검색/전체보기 호버 효과 적용
========================================================= */
#storeInventoryOutPage .store-out-store-search-box {
    margin: 10px 0 14px;
}

/* =========================================================
   검색 입력창 공통
   매장 출고 / 매장별 출고 이력 / 재고 이동
========================================================= */
#storeInventoryOutPage .store-out-store-search-box input,
#storeOutHistoryPage .store-out-store-search-box input,
#inventoryOutPage .store-out-store-search-box input,
#productHeadOrderPage .store-out-store-search-box input {
    width: 82%;
    height: 35px;

    box-sizing: border-box;

    padding: 0 9px;

    border: 1px solid #d8e1db;
    border-radius: 8px;

    outline: none;

    background: #eef5f1;

    color: #2b3c32;

    font-size: 13px;

    transition:
            border-color 0.16s ease,
            box-shadow 0.16s ease,
            background 0.16s ease;
}


/* 검색창 안내 문구 */
#storeInventoryOutPage .store-out-store-search-box input::placeholder,
#storeOutHistoryPage .store-out-store-search-box input::placeholder,
#inventoryOutPage .store-out-store-search-box input::placeholder,
#productHeadOrderPage .store-out-store-search-box input::placeholder{
    color: #9aa49e;
    font-size: 10px;
}


/* 검색창에 마우스를 올렸을 때 */
#storeInventoryOutPage .store-out-store-search-box input:hover,
#storeOutHistoryPage .store-out-store-search-box input:hover,
#inventoryOutPage .store-out-store-search-box input:hover,
#productHeadOrderPage .store-out-store-search-box input:hover{
    border-color: #9eb4a6;
    background: #fbfdfb;
}


/* 검색창을 클릭했을 때 */
#storeInventoryOutPage .store-out-store-search-box input:focus,
#storeOutHistoryPage .store-out-store-search-box input:focus,
#inventoryOutPage .store-out-store-search-box input:focus,
#productHeadOrderPage .store-out-store-search-box input:focus{
    border-color: #5d846c;

    box-shadow:
            0 0 0 2px rgba(66, 112, 83, 0.10);
}



/* =========================================================
   검색 / 전체보기 공통 버튼
========================================================= */
#storeInventoryOutPage .store-out-store-search-button,
#storeInventoryOutPage .store-out-store-reset-button,
#storeOutHistoryPage .store-out-store-search-button,
#storeOutHistoryPage .store-out-store-reset-button,
#inventoryOutPage .store-out-store-search-button,
#inventoryOutPage .store-out-store-reset-button,
#productHeadOrderPage .store-out-store-search-button,
#productHeadOrderPage .store-out-store-reset-button{
    height: 30px;
    width: 82px;
    padding: 0 8px;

    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
            background 0.16s ease,
            border-color 0.16s ease,
            color 0.16s ease,
            transform 0.16s ease,
            box-shadow 0.16s ease;
}


/* =========================================================
   검색 버튼 기본 상태
========================================================= */
#storeInventoryOutPage .store-out-store-search-button,
#storeOutHistoryPage .store-out-store-search-button,
#inventoryOutPage .store-out-store-search-button,
#productHeadOrderPage .store-out-store-search-button{
    border: 1px solid #315e48;

    background: #315e48;

    color: #ffffff;
}


/* 검색 버튼 호버 */
#storeInventoryOutPage .store-out-store-search-button:hover,
#storeOutHistoryPage .store-out-store-search-button:hover,
#inventoryOutPage .store-out-store-search-button:hover,
#productHeadOrderPage .store-out-store-search-button:hover{
    border-color: #244b38;

    background: #244b38;

    transform: translateY(-1px);

    box-shadow:
            0 4px 10px rgba(37, 76, 56, 0.16);
}


/* =========================================================
   전체보기 버튼 기본 상태
========================================================= */
#storeInventoryOutPage .store-out-store-reset-button,
#storeOutHistoryPage .store-out-store-reset-button,
#inventoryOutPage .store-out-store-reset-button,
#productHeadOrderPage .store-out-store-reset-button{
    border: 1px solid #d7e0da;

    background: #f7f9f7;

    color: #516158;
}


/* 전체보기 버튼 호버 */
#storeInventoryOutPage .store-out-store-reset-button:hover,
#storeOutHistoryPage .store-out-store-reset-button:hover,
#inventoryOutPage .store-out-store-reset-button:hover,
#productHeadOrderPage .store-out-store-reset-button:hover{
    border-color: #8fa99a;

    background: #edf3ef;

    color: #2d5942;

    transform: translateY(-1px);
}


/* 버튼을 누르는 순간 */
#storeInventoryOutPage .store-out-store-search-button:active,
#storeInventoryOutPage .store-out-store-reset-button:active,
#storeOutHistoryPage .store-out-store-search-button:active,
#storeOutHistoryPage .store-out-store-reset-button:active,
#inventoryOutPage .store-out-store-search-button:active,
#inventoryOutPage .store-out-store-reset-button:active,
#productHeadOrderPage .store-out-store-search-button:active,
#productHeadOrderPage .store-out-store-reset-button:active{
    transform: translateY(0);
    box-shadow: none;
}



/* =========================================================
   검색 영역 가운데 정렬
   매장 출고 / 매장별 출고 이력 / 재고 이동
========================================================= */
#storeInventoryOutPage .store-out-store-search-box,
#storeOutHistoryPage .store-out-store-search-box,
#inventoryOutPage .store-out-store-search-box,
#productHeadOrderPage .store-out-store-search-box {
    margin: 10px 0 14px;
}





/* 검색창 가운데 정렬 */
#storeInventoryOutPage .store-out-store-search-box input,
#storeOutHistoryPage .store-out-store-search-box input,
#inventoryOutPage .store-out-store-search-box input,
#productHeadOrderPage .store-out-store-search-box input{
    display: block;
    width: 82%;
    margin: 0 auto;
}


/* 검색 / 전체보기 버튼 가운데 정렬 */
#storeInventoryOutPage .store-out-store-search-actions,
#storeOutHistoryPage .store-out-store-search-actions,
#inventoryOutPage .store-out-store-search-actions,
#productHeadOrderPage .store-out-store-search-action{
    display: flex;

    justify-content: space-between;
    align-items: center;

    width: 80%;

    margin: 8px auto 0;
}

/* =========================================================
   상품 단가 관리
   왼쪽 : 상품 목록
   오른쪽 위 : 공급단가 수정
   오른쪽 아래 : 단가 변경 이력
   다른 페이지에는 영향 없음
========================================================= */

#productPriceManage .price-manage-layout {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 22px;

    width: 100%;
    min-height: 720px;
}


/* =========================================================
   공통 카드
========================================================= */

#productPriceManage .price-product-panel,
#productPriceManage .price-edit-card,
#productPriceManage .price-history-card {
    background: #ffffff;
    border: 1px solid #e6ebe8;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(31, 52, 41, 0.05);
}


/* =========================================================
   왼쪽 상품 목록
========================================================= */


/* 왼쪽 제목 */
#productPriceManage .price-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 34px;
}

#productPriceManage .price-panel-header div > span {
    display: block;

    margin-bottom: 0;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #8a9690;
}

#productPriceManage .price-panel-header h2 {
    margin:1px;

    font-size:18px;
    font-weight:700;

    color:#2f3f38;
}

#productPriceManage .price-panel-header > strong {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;
    padding: 0 10px;

    border-radius: 19px;
    background: #f0f5f2;

    font-size: 14px;
    color: #496456;
}


/* 상품 검색 */
#productPriceManage .price-product-search {
    display: flex;
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 8px;

    margin-top: 14px;
    margin-bottom: 18px;
}

#productPriceManage .price-product-search input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 14px;

    border: 1px solid #dfe6e2;
    border-radius: 11px;
    outline: none;

    font-size: 13px;
    color: #293a32;
    background: #fafcfb;

    flex:1;
}

#productPriceManage .price-product-search input:focus {
    border-color: #799184;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(75, 105, 89, 0.09);
}



/*검색창 버튼컬러*/
#productPriceManage .price-product-search button {
    height: 42px;
    min-width:70px;

    border: 1px solid #d7e1db;
    border-radius: 11px;

    font-size: 13px;
    font-weight: 700;
    color: #3f5a4b;
    background: #d7e7df;

    cursor: pointer;
}

#productPriceManage .price-product-search button:hover {
background: #e1ece5;
border-color: #b9c9c0;
}



#productPriceResetButton{
    min-width:90px;
}



/* 상품 목록 리스트 제목 */
#productPriceManage .price-product-list-head {
    display: grid;
    grid-template-columns: 110px 1.5fr 100px 50px;
    align-items: center;


    gap: 8px;

    padding: 0 8px 11px;
    border-bottom: 1px solid #dfe7e2;

    font-size: 13px;
    font-weight: 600;
    color: #2f3d36;
}


/* 상품 목록 */
#productPriceManage .price-product-list {
    flex: 1;

    min-height: 500px;
    max-height: 620px;
    overflow-y: auto;

    padding-top: 8px;
}


/* JS에서 생성할 상품 버튼 공통 형태 */
#productPriceManage .price-product-item {
    display: grid;
    grid-template-columns: 110px 1.5fr 80px 80px;
    align-items: center;
    gap: 12px;

    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    margin-bottom: 4px;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;

    color: #2f3d36;
    background: transparent;

    border: 0;
    border-radius: 11px;


    cursor: pointer;
}

/* 상품코드 */
#productPriceManage .price-product-item span:nth-child(1) {
    justify-self: start;
    text-align: left;
}

/* 상품명 */
#productPriceManage .price-product-item strong {
    justify-self: start;
    text-align: left;

    font-size: 13px;
    font-weight: 600;
    color: #2f3d36;

    margin: 0;
    padding: 0;

    position: relative;
    left: -11px;
}

/* 매입단가 */
#productPriceManage .price-product-item span:nth-child(3) {
    justify-self: end;
    text-align: right;
    padding-right: 17px;
}

/* 공급단가 */
#productPriceManage .price-product-item span:nth-child(4) {
    justify-self: end;
    text-align: right;
    padding-right: 4px;

}


#productPriceManage .price-product-item:hover {
    background: #f5f8f6;
}

#productPriceManage .price-product-item.active {
    background: #eaf2ed;
}

#productPriceManage .price-product-code {
    overflow: hidden;

    font-size: 12px;
    font-weight: 600;
    color: #909b95;

    white-space: nowrap;
    text-overflow: ellipsis;
}

#productPriceManage .price-product-name {
    overflow: hidden;

    font-size: 14px;
    font-weight: 700;
    color: #293a32;

    white-space: nowrap;
    text-overflow: ellipsis;
}

#productPriceManage .price-product-empty {
    padding: 50px 10px;

    text-align: center;
    font-size: 13px;
    color: #9aa49f;
}


/* =========================================================
   오른쪽 전체
========================================================= */

#productPriceManage .price-right-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 22px;

    min-width: 0;
}





/* =========================================================
   오른쪽 위 - 공급단가 수정
========================================================= */

#productPriceManage .price-edit-card {
    padding:18px 22px 22px;

    background: #ffffff;
    border-color: #e2e8e4;
}

/* 수정 카드 제목 */
#productPriceManage .price-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 24px;
}

#productPriceManage .price-edit-header div > span {
    display: block;

    margin-bottom: 6px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: #8a9690;
}

#productPriceManage .price-edit-header h2 {
    margin: 0;

    font-size: 22px;
    font-weight: 700;
    color: #26372f;
}

#productPriceManage .price-edit-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 30px;
    padding: 0 13px;

    border-radius: 15px;
    background: #edf5f0;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: #4f6d5d;
}

/* 선택된 상품 기본정보 한 줄 배경 */
#productPriceManage .price-selected-header {
    background: #eaf2ed;
    border: 1px solid #d7e5d8;
    border-radius: 10px;

    padding: 0;
    margin-bottom: 14px;

    overflow: hidden;
}

/* 헤더 안의 기존 여백 제거 */
#productPriceManage .price-selected-header .price-selected-product {
    padding: 14px 16px;
    margin: 0;

    border-bottom: 0;
    align-items: center;
}



/* 선택 상품 */
#productPriceManage .price-selected-product {
    padding-bottom: 22px;
    margin-bottom: 22px;

    border-bottom: 1px solid #edf1ef;
}

#productPriceManage .price-selected-product > span {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #98a19c;
}

#productPriceManage .price-selected-product h3 {
    margin: 0 0 7px;

    font-size: 28px;
    font-weight: 700;
    color: #24372d;
}

#productPriceManage .price-selected-product p {
    margin: 0;

    font-size: 13px;
    color: #8b9690;
}


/* 단가 입력 3칸 */
#productPriceManage .price-edit-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
    align-items: start;
}

#productPriceManage .price-edit-grid *,
#productPriceManage .price-edit-grid *::before,
#productPriceManage .price-edit-grid *::after {
    box-sizing: border-box;
}


/* 현재 공급단가 값 박스 */
#productPriceManage .price-current-value {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    height: 38px;
    padding: 0 11px;

    border: 1px solid #dce4df;
    border-radius: 10px;
    background: #f4f7f5;

    box-sizing: border-box;
}

/* 현재 공급단가 금액 */
#productPriceManage .price-current-value strong {
    font-size: 14px;
    font-weight: 750;
    color: #234236;
}

/* 원 표시 */
#productPriceManage .price-current-value span {
    font-size: 12px;
    font-weight: 600;
    color: #7d8983;
}




/* 입력 필드 */
/* 입력 필드 */
#productPriceManage .price-input-field{

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    gap:4px;                 /* 6 → 4 */
}

#productPriceManage .price-input-field label {

    margin-bottom:4px;       /* 8 → 4 */

    font-size:11px;          /* 12 → 11 */
    font-weight:700;
    color:#66756d;
}

#productPriceManage .price-input-field > input,
#productPriceManage .price-input-unit {

    width:100%;
    height:38px;             /* 48 → 38 */

    border:1px solid #dce4df;
    border-radius:10px;      /* 12 → 10 */

    background:#ffffff;
}

#productPriceManage .price-input-field > input {

    padding:0 11px;          /* 13 → 11 */

    outline:none;

    font-size:13px;          /* 14 → 13 */
    color:#2b3c33;
}

#productPriceManage .price-input-unit{

    display:flex;
    align-items:center;
    overflow:hidden;
}

#productPriceManage .price-input-unit input{

    flex:1;
    min-width:0;

    height:100%;
    padding:0 11px;

    border:0;
    outline:none;

    font-size:14px;          /* 16 → 14 */
    font-weight:700;

    color:#26382f;
}

#productPriceManage .price-input-unit span{

    padding-right:11px;

    font-size:12px;          /* 13 → 12 */
    font-weight:600;

    color:#7d8983;
}

#productPriceManage .price-input-field > input:focus,
#productPriceManage .price-input-unit:focus-within {
    border-color: #789083;
    box-shadow: 0 0 0 3px rgba(76, 105, 89, 0.09);
}


/*========================== 단가 관리 저장 버튼=========================== */
#productPriceManage .price-edit-save {
    display: flex;
    justify-content: flex-end;

    margin-top: 12px;
}

/* 버튼 */
#productPriceManage .price-edit-save button {
    min-width: 90px;
    height: 32px;
    padding: 0 14px;

    border: 1px solid #476454;
    border-radius: 9px;

    background: #496858;

    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;

    cursor: pointer;
    transition: all .18s ease;
}

/* Hover */
#productPriceManage .price-edit-save button:hover {

    background: linear-gradient(180deg,#507563,#406050);

    transform: translateY(-1px);

    box-shadow: 0 8px 18px rgba(53,86,70,.18);
}

/* Click */
#productPriceManage .price-edit-save button:active {

    transform: translateY(0);

    box-shadow: none;
}



/* 오른쪽 아래 - 단가 변경 이력 */
#productPriceManage .price-history-card {

    background: #ffffff;
    border: 1px solid #e2e8e4;

    border-radius: 20px;

    padding: 18px 18px;

    min-height: 330px;

    box-shadow: 0 8px 28px rgba(31, 52, 41, 0.05);
}

#productPriceManage .price-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 18px;
}

#productPriceManage .price-history-header div > span {
    display: block;

    margin-bottom: 6px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #8a9690;
}

#productPriceManage .price-history-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #26372f;
}

#productPriceManage .price-history-header > strong {
    font-size: 14px;
    color: #607269;
}


#productPriceManage .price-history-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#productPriceManage .price-history-table th {
    padding: 12px 10px;

    border-bottom: 1px solid #e7ece9;

    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #84918a;
}

#productPriceManage .price-history-table td {
    padding: 14px 10px;

    border-bottom: 1px solid #f0f3f1;

    font-size: 13px;
    color: #35453d;
}

#productPriceManage .price-history-table tbody tr:hover {
    background: #f8faf9;
}

#productPriceManage .price-history-empty td {
    height: 150px;

    text-align: center;
    color: #9ba59f;
}


/* =========================================================
   왼쪽 작은 화면 대응
========================================================= */

@media (max-width: 1200px) {

    #productPriceManage .price-manage-layout {
        grid-template-columns: 520px minmax(0, 1fr);
    }

    #productPriceManage .price-edit-grid {
        grid-template-columns: 1fr 1fr;
    }

    #productPriceManage .price-current-box {
        grid-column: 1 / -1;
    }
}

/* =========================================================
   상품 단가 관리 - 영역별 카드 색상
========================================================= */


#productPriceManage .price-product-panel {
    display: flex;
    flex-direction: column;

    padding: 24px;
    min-width: 0;

    background: #ffffff;
    border: 1px solid #3c7058;
    border-radius: 18px;

    box-shadow: 0 8px 20px rgba(47,107,79,.08);
}






/* 매입단가 */
#productPriceManage .price-product-purchase{
    text-align:right;
    font-size:13px;
    font-weight:600;
    color:#55645d;
}

/* 공급단가 */
#productPriceManage .price-product-supply{
    text-align:right;
    font-size:13px;
    font-weight:700;
    color:#2f4d3d;
}

/* 선택 버튼 */
#productPriceManage .price-product-select{
    display:flex;
    justify-content:center;
}

#productPriceManage .price-product-select button{

    width:42px;
    height:28px;

    border:1px solid #d9e4de;
    border-radius:8px;

    background:#ffffff;
    color:#486455;

    font-size:11px;
    font-weight:700;

    cursor:pointer;
}

#productPriceManage .price-product-select button:hover{

    background:#edf4f0;
    border-color:#7d9488;

}




/* =========================================================
   상품 단가 관리 - 선택 상품 정보
   상품명 / 상품코드 / 거래처명 / 거래처코드 /
   사업자등록번호 / 회사전화번호 / 등록일
========================================================= */

#productPriceManage .price-selected-product {
    display: grid;

    grid-template-columns:
        minmax(100px, 1.15fr)   /* 상품명 */
        minmax(90px, 0.95fr)    /* 상품코드 */
        minmax(100px, 1.05fr)   /* 거래처명 */
        minmax(90px, 0.95fr)    /* 거래처코드 */
        minmax(125px, 1.25fr)   /* 사업자등록번호 */
        minmax(115px, 1.15fr)   /* 회사전화번호 */
        minmax(90px, 0.9fr);    /* 등록일 */

    gap: 16px;
    align-items: start;

    padding: 14px 0 18px;
    margin-bottom: 18px;

    border-bottom: 1px solid #e7ece9;
}


/* 각 정보 칸 */
#productPriceManage .price-selected-info-item {
    min-width: 0;
}


/* 항목 제목 */
#productPriceManage .price-selected-info-item span {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    color: #84918a;
}


/* 항목 값 */
#productPriceManage .price-selected-info-item strong {
    display: block;
    overflow: hidden;

    min-height: 18px;

    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;

    color: #293a32;

    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 선택 상품 정보 */
#productPriceManage .price-info-header{

    margin: 2px 0 14px;      /* 기존보다 위 여백을 거의 없앰 */
    padding-top: 0;

}

#productPriceManage .price-info-header span{

    display:block;

    margin-bottom:4px;

    font-size:11px;
    font-weight:700;
    letter-spacing:1px;

    color:#97a49d;

}

#productPriceManage .price-info-header h3{

    margin:0;

    font-size:18px;
    font-weight:700;

    color:#2f3f38;

}


/* =========================================================
   상품 단가 관리
   단가 변경 이력 테이블
========================================================= */

/* 테이블 영역 */
#productPriceManage .price-history-table-wrap {
    width: 100%;
    margin-top: 16px;

    border: 1px solid #e3e9e5;
    border-radius: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    background: #ffffff;
}


/* 제목 행 */
#productPriceManage .price-history-table thead {
    background: #f3f7f5;
}

#productPriceManage .price-history-table th {
    height: 42px;
    padding: 0 10px;

    border-bottom: 1px solid #dfe7e2;

    font-size: 11px;
    font-weight: 700;
    color: #627168;

    text-align: center;
    white-space: nowrap;
}


/* 내용 행 */
#productPriceManage .price-history-table td {
    height: 46px;
    padding: 0 10px;

    border-bottom: 1px solid #edf1ee;

    font-size: 12px;
    font-weight: 600;
    color: #314139;

    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 마지막 줄 테두리 제거 */
#productPriceManage .price-history-table tbody tr:last-child td {
    border-bottom: 0;
}


/* 행 Hover */
#productPriceManage .price-history-table tbody tr:not(.price-history-empty-row):hover {
    background: #f7faf8;
}


#productPriceManage .price-history-table td:nth-child(6) {
    font-weight: 750;
    color: #2d5b45;
}


/* 빈 이력 안내 */
#productPriceManage .price-history-empty-row td {
    height: 150px;

    font-size: 13px;
    font-weight: 600;
    color: #9aa59f;

    text-align: center;
    background: #fbfcfb;
}


/* 이력 건수 */
#productPriceManage #productPriceHistoryCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 44px;
    height: 28px;
    padding: 0 10px;

    border-radius: 14px;
    background: #edf4f0;

    font-size: 11px;
    font-weight: 700;
    color: #4d6859;
}



/* =========================================================
   단가 변경 이력 컬럼 정렬
========================================================= */
#productPriceManage .price-history-table {
    width: 100%;
    table-layout: fixed;
}

#productPriceManage .price-history-table th,
#productPriceManage .price-history-table td {
    box-sizing: border-box;
    padding: 10px 6px;
    text-align: center;
}


/* 이력 테이블 컬럼 폭 */
#productPriceManage .price-history-table th:nth-child(1) {
    width: 52px;
}

#productPriceManage .price-history-table th:nth-child(2) {
    width: 110px;
}

#productPriceManage .price-history-table th:nth-child(3) {
    width: 120px;
}

#productPriceManage .price-history-table th:nth-child(4),
#productPriceManage .price-history-table th:nth-child(5) {
    width: 120px;
}

#productPriceManage .price-history-table th:nth-child(6) {
    width: 105px;
}

#productPriceManage .price-history-table th:nth-child(7) {
    width: 145px;
}

#productPriceManage .price-history-table th:nth-child(8) {
    width: 80px;
}





/* =========================================================
   입출고 이력 페이지
========================================================= */
#inventoryHistoryPage {
    padding: 0;
}


/* =========================================================
   페이지 제목
========================================================= */
#inventoryHistoryPage .inventory-history-title {
    margin-bottom: 20px;
}

#inventoryHistoryPage .inventory-history-title h2 {
    margin: 0 0 6px;

    color: #1f3028;

    font-size: 24px;
    font-weight: 700;
}

#inventoryHistoryPage .inventory-history-title p {
    margin: 0;

    color: #7a8780;

    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   조회 조건 카드
========================================================= */
#inventoryHistoryPage .inventory-history-filter-card {

    padding: 18px 20px;

    border: 1px solid #e1e8e4;
    border-radius: 14px;

    background: var(--fv-soft-green);

    box-shadow:
            0 4px 14px rgba(28, 67, 50, 0.05);

    margin-bottom: 16px;

    box-sizing: border-box;
}


/* 조회 숫자 한줄 표시 */
#inventoryHistoryPage .inventory-history-filter-row {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1.8fr 82px 82px;

    gap: 12px;
    align-items: end;

    width: 100%;
}




/* 두 번째 줄 */
#inventoryHistoryPage .inventory-history-filter-row.second {
    margin-top: 14px;
}


/* =========================================================
   조회 필드
========================================================= */
#inventoryHistoryPage .inventory-history-field {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

#inventoryHistoryPage .inventory-history-field label {

    color: #5e6d65;

    font-size: 12px;
    font-weight: 700;
}


/* input / select */
#inventoryHistoryPage .inventory-history-field input,
#inventoryHistoryPage .inventory-history-field select {

    width: 100%;
    height: 32px;

    padding: 0 11px;

    border: 1px solid #dbe4df;
    border-radius: 8px;

    background: #ffffff;

    color: #33443b;

    font-size: 12px;

    outline: none;

    box-sizing: border-box;
}


/* focus */
#inventoryHistoryPage .inventory-history-field input:focus,
#inventoryHistoryPage .inventory-history-field select:focus {

    border-color: #7ca891;

    box-shadow:
            0 0 0 3px rgba(62, 127, 96, 0.09);
}


/* =========================================================
   기간 조회
========================================================= */
#inventoryHistoryPage .inventory-history-date-range {

    display: grid;

    grid-template-columns: 1fr 20px 1fr;

    gap: 6px;

    align-items: center;
}

#inventoryHistoryPage .inventory-history-date-range span {

    text-align: center;

    color: #7a8780;

    font-size: 12px;
}


/* =========================================================
   입고 / 출고 선택 버튼
========================================================= */
#inventoryHistoryPage .inventory-history-type-buttons {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    height: 36px;

    border: 1px solid #dbe4df;
    border-radius: 8px;

    overflow: hidden;
}

#inventoryHistoryPage .inventory-history-type-buttons button {

    border: 0;
    border-right: 1px solid #e2e9e5;

    background: #ffffff;

    color: #66756d;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

#inventoryHistoryPage .inventory-history-type-buttons button:last-child {
    border-right: 0;
}

#inventoryHistoryPage .inventory-history-type-buttons button:hover {
    background: #f3f8f5;
}

#inventoryHistoryPage .inventory-history-type-buttons button.active {

    background: #234f3a;

    color: #ffffff;
}


/* =========================================================
   조회 / 초기화 버튼
========================================================= */
#inventoryHistoryPage .inventory-history-search-area {

    display: flex;

    align-items: flex-end;
}

#inventoryHistoryPage .inventory-history-search-button,
#inventoryHistoryPage .inventory-history-reset-button {

    width: 82px;
    height: 36px;


    box-sizing: border-box;
    border-radius: 8px;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


/* 조회 */
#inventoryHistoryPage .inventory-history-search-button {

    border: 0;

    background: #527565;

    color: #ffffff;
}

#inventoryHistoryPage .inventory-history-search-button:hover {
    background: #183d2b;
}


/* 초기화 */
#inventoryHistoryPage .inventory-history-reset-button {

    border: 1px solid #d5dfd9;

    background: #ffffff;

    color: #234f3a;
}

#inventoryHistoryPage .inventory-history-reset-button:hover {
    background: #f2f6f3;
}


/* =========================================================
   요약 카드
========================================================= */
#inventoryHistoryPage .inventory-history-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    margin-bottom: 16px;
    box-sizing: border-box;
}




#inventoryHistoryPage .inventory-history-summary-item {
    min-height: 52px;
    padding: 7px 12px;

    border: 1px solid #e1e8e4;
    border-radius: 12px;
    background: #ffffff;

    display: flex;
    align-items: center;

    gap: 12px;

    box-sizing: border-box;
}



/* 요약 아이콘 */
#inventoryHistoryPage .inventory-history-summary-icon {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 10px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: 800;
}


/* 입고 */
#inventoryHistoryPage .inventory-history-summary-icon.in {

    background: #e8f4ed;

    color: #257255;
}


/* 출고 */
#inventoryHistoryPage .inventory-history-summary-icon.out {

    background: #fdeceb;

    color: #d65752;
}


/* 요약 제목 */
#inventoryHistoryPage .inventory-history-summary-item p {

    margin: 0 0 5px;

    color: #7a8780;

    font-size: 11px;
    font-weight: 700;
}


/* 요약 숫자 */
#inventoryHistoryPage .inventory-history-summary-item strong {

    color: #24372d;

    font-size: 17px;
    font-weight: 700;

    white-space: nowrap;
}

#inventoryHistoryPage .inventory-history-summary-item strong span {

    margin-left: 3px;

    color: #839087;

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   목록 카드
========================================================= */
#inventoryHistoryPage .inventory-history-list-card {

    border: 1px solid #e1e8e4;

    border-radius: 14px;

    background: #ffffff;

    overflow: hidden;
}


/* 목록 상단 */
#inventoryHistoryPage .inventory-history-list-header {

    min-height: 62px;

    padding: 0 18px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #e8eeea;
}

#inventoryHistoryPage .inventory-history-list-header h3 {

    margin: 0;

    color: #283a30;

    font-size: 15px;
    font-weight: 700;
}

#inventoryHistoryPage .inventory-history-list-header h3 span {

    margin-left: 8px;

    color: #87938c;

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   엑셀 버튼
========================================================= */
#inventoryHistoryPage .inventory-history-list-actions button {

    height: 32px;

    padding: 0 14px;

    border: 1px solid #cfdcd4;
    border-radius: 8px;

    background: #ffffff;

    color: #315c43;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

#inventoryHistoryPage .inventory-history-list-actions button:hover {

    background: #eaf2ed;
}


/* =========================================================
   테이블
========================================================= */
#inventoryHistoryPage .inventory-history-table-box {

    width: 100%;

    overflow-x: auto;
}

#inventoryHistoryPage .inventory-history-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 1180px;
}


/* 헤더 */
#inventoryHistoryPage .inventory-history-table thead th {

    height: 42px;

    padding: 0 10px;

    background: #f7f9f8;

    border-bottom: 1px solid #e1e8e4;

    color: #58675f;

    font-size: 11px;
    font-weight: 700;

    text-align: center;

    white-space: nowrap;
}


/* 본문 */
#inventoryHistoryPage .inventory-history-table tbody td {

    height: 44px;

    padding: 0 10px;

    border-bottom: 1px solid #edf1ee;

    color: #34463c;

    font-size: 11px;
    font-weight: 500;

    text-align: center;

    white-space: nowrap;
}

#inventoryHistoryPage .inventory-history-table tbody tr:hover {

    background: #fafcfb;
}


/* 빈 데이터 */
#inventoryHistoryPage .inventory-history-empty-row td {

    height: 110px;

    color: #9aa39e;

    text-align: center;
}


/* =========================================================
   상세보기 버튼
========================================================= */
#inventoryHistoryPage .inventory-history-table button {

    height: 28px;

    padding: 0 11px;

    border: 1px solid #cbdcd1;
    border-radius: 7px;

    background: #ffffff;

    color: #315c43;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

#inventoryHistoryPage .inventory-history-table button:hover {

    background: #e4f0e8;
}


/* =========================================================
   페이지 하단
========================================================= */
#inventoryHistoryPage .inventory-history-footer {

    min-height: 56px;

    padding: 0 18px;

    display: flex;

    align-items: center;
    justify-content: space-between;
}


/* 몇 개씩 보기 */
#inventoryHistoryPage #inventoryHistoryPageSize {

    height: 32px;

    padding: 0 10px;

    border: 1px solid #d7e0db;
    border-radius: 7px;

    background: #ffffff;

    color: #526158;

    font-size: 11px;
}


/* 페이지 번호 */
#inventoryHistoryPage .inventory-history-pagination {

    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#inventoryHistoryPage .inventory-history-pagination button {

    min-width: 30px;
    height: 30px;

    border: 1px solid #d6dfda;
    border-radius: 7px;

    background: #ffffff;

    color: #5b6961;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}

#inventoryHistoryPage .inventory-history-pagination button.active {

    background: #234f3a;

    border-color: #234f3a;

    color: #ffffff;
}


/* =========================================================
   반응형
========================================================= */
/* @media (max-width: 1350px) {

    #inventoryHistoryPage .inventory-history-filter-row {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    #inventoryHistoryPage .inventory-history-summary {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}    */


@media (max-width: 850px) {

    #inventoryHistoryPage .inventory-history-filter-row {

        grid-template-columns: 1fr;
    }

    #inventoryHistoryPage .inventory-history-summary {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 560px) {

    #inventoryHistoryPage .inventory-history-summary {

        grid-template-columns: 1fr;
    }

}



#inventoryHistoryPage .inventory-history-product-select input {
    width: 100%;
    padding-right: 36px;
    box-sizing: border-box;
}

/* 입출고이력 칸넙히기*/
#inventoryHistoryPage .inventory-history-list-title-area {
    display: flex;
    align-items: center;
    gap: 70px;
}




/* 입출고 구분 상세 - 위 조회조건과 동일한 스타일 */
#inventoryHistoryPage .inventory-history-list-detail-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

#inventoryHistoryPage .inventory-history-list-detail-filter label {
    color: #5e6d65;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

#inventoryHistoryPage .inventory-history-list-detail-filter select {
    width: 120px;
    height: 32px;

    padding: 0 11px;

    border: 1px solid #dbe4df;
    border-radius: 8px;

    background: #ffffff;

    color: #33443b;
    font-size: 12px;

    outline: none;
    box-sizing: border-box;
}








/* =========================================================
   FRESHVAULT MASTER MANAGEMENT
   기준 화면 : 상품 관리
   거래처 / 상품 / 매장 관리 공통 위치 고정
========================================================= */

.master-manage-page {
    width: 100%;
    box-sizing: border-box;
}


/* 검색 박스 높이와 시작 위치 고정 */
.master-manage-page .customer-manage-search-box {
    width: 100%;
    min-height: 105px;

    margin-top: 15px;
    padding: 18px 20px;

    box-sizing: border-box;

    background: #f4faf7;
    border: 1px solid #d9ebe2;
    border-left: none;
    border-radius: 8px;
}


/* 설명 영역 높이 고정 */
.master-manage-page .customer-manage-section-header {
    height: 24px;
    margin: 0;
}

.master-manage-page .customer-manage-section-description {
    margin: 4px 0 0;
    font-size: 13px;
    color: #777;
}





/* 라벨 */
.master-manage-page .customer-manage-search-row > label {
    margin: 0;

    font-size: 12px;
    font-weight: 650;
    color: #4b5c53;

    white-space: nowrap;
}


/* input / select 동일 높이 */
.master-manage-page .customer-manage-search-row > input,
.master-manage-page .customer-manage-search-row > select {
    width: 100%;
    height: 32px;

    padding: 0 9px;

    box-sizing: border-box;

    border: 1px solid #d6e2da;
    border-radius: 6px;

    background: #ffffff;

    font-size: 12px;
    color: #34483e;
}


/* 검색 / 전체목록 */
.master-manage-page .common-button {
    height: 32px;
    min-width: 72px;

    padding: 0 12px;

    box-sizing: border-box;

    white-space: nowrap;

    font-size: 11px;
}



/* =========================================================
   목록 시작선 고정
========================================================= */
.master-manage-page .customer-manage-list-box {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.master-manage-page .customer-manage-table-wrap {
    width: 100%;
    margin-top: 24px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid rgba(31, 109, 67, 0.12);
    border-radius: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    box-shadow: 0 4px 14px rgba(36, 69, 55, 0.06);
}


/* =========================================================
   거래처 관리 - 목록 테이블 기본 높이
   거래처가 적어도 약 15행 정도의 화면 높이 유지
========================================================= */

#customerManagePage .customer-manage-table-wrap {
    min-height: 650px;
}



/* 테이블 높이도 통일 */
.master-manage-page .customer-manage-table thead th {
    height: 44px;
    padding: 0 10px;

    font-size: 12px;
    text-align: center;

    white-space: nowrap;
}

.master-manage-page .customer-manage-table tbody td {
    height: 44px;
    padding: 0 10px;

    font-size: 12px;
    text-align: center;

    white-space: nowrap;
}



/* =========================================================
   iPad 가로
========================================================= */
@media (max-width: 1180px) {

    .master-manage-page .customer-manage-search-box {
        overflow-x: auto;
    }

    .master-manage-page .customer-manage-search-row {
        min-width: 1000px;
    }
}

/* =========================================================
   FRESHVAULT MASTER MANAGEMENT
   상품 관리 기준 공통 골격
========================================================= */

.master-manage-page {
    width: 100%;
    box-sizing: border-box;
}

.master-manage-page .customer-manage-search-box {
    width: 100%;
    min-height: 105px;

    margin-top: 15px;
    padding: 18px 20px;

    box-sizing: border-box;

    background: #f4faf7;
    border: 1px solid #d9ebe2;
    border-left: none;
    border-radius: 8px;
}

.master-manage-page .customer-manage-section-header {
    height: 24px;
    margin: 0;
}

.master-manage-page .customer-manage-section-description {
    margin: 4px 0 0;
    font-size: 13px;
    color: #777;
}

.master-manage-page .customer-manage-list-box {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.master-manage-page .customer-manage-table-wrap {
    width: 100%;
    margin-top: 24px;
    box-sizing: border-box;
}


/* 상품 검색 input은 기존 크기 사용 */
#productManagePage.master-manage-page
.customer-manage-search-row > input {
    width: auto;
}


/* 상품 버튼도 GRID 규칙 해제 */
#productManagePage.master-manage-page
.customer-manage-search-row > button {
    width: auto;
}


/* 신규 상품 등록 카드 기존 방식 복원 */
#productManagePage.master-manage-page
.customer-register-card {
    width: auto;
    min-width: 230px;
    height: 38px;

    margin-left: auto;

    justify-self: auto;
    position: relative;
    top: 1px;
}




/* =========================================================
   매장 관리 - 상품 관리 기준 검색행 보정
========================================================= */

#storeListPage .customer-manage-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

#storeListPage #storeSearchInput {
    width: 170px;
}

#storeListPage #regionFilter {
    width: 130px;
}

#storeListPage #groupFilter {
    width: 110px;
}

#storeListPage #sortFilter {
    width: 110px;
}


/* =========================================================
   FRESHVAULT MASTER MANAGEMENT
   상품 관리 기준 → 거래처 관리 적용
========================================================= */

#customerManagePage.master-manage-page .customer-manage-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;

    width: auto;
    min-height: unset;
    margin-top: 0;
}

#customerManagePage.master-manage-page
.customer-manage-search-row > input {
    width: 170px;
    flex: 0 0 170px;
}

#customerManagePage.master-manage-page
.customer-manage-search-row > button {
    width: auto;
    flex-shrink: 0;
}

#customerManagePage.master-manage-page
.customer-register-card {
    width: auto;
    min-width: 230px;
    height: 38px;

    margin-left: auto;

    position: relative;
    top: 1px;
}


/* =========================================================
   매장별 출고 이력 - 선택 매장코드
========================================================= */
#storeOutHistorySelectedCode {
    display: inline-block;

    margin-top: 4px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;

    color: #7b8580;

    letter-spacing: 0.03em;
}


/* =========================================================
   매장별 장비 현황 - 검색 영역 한 줄 정렬
========================================================= */

#equipmentByStorePage .customer-manage-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#equipmentByStorePage #equipmentSearchType {
    width: 180px;
    flex: 0 0 180px;
}

#equipmentByStorePage #equipmentSearchKeyword {
    width: 180px;
    flex: 0 0 180px;
}

#equipmentByStorePage .customer-register-card {
    margin-left: auto;
}

/* =========================================================
   본사 구매발주 - 왼쪽 목록 폭 + 오른쪽 영역 같이 이동
========================================================= */

#productHeadOrderPage .inventory-in-workspace {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
}


/* =========================================================
   본사 구매발주 - 검색 / 전체보기 버튼만 정리
========================================================= */

#productHeadOrderPage .store-out-store-search-actions {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 58px;

    width: 82%;
    margin: 10px auto 0;
}


/* 검색 / 전체보기 공통 */
#productHeadOrderPage .store-out-store-search-button,
#productHeadOrderPage .store-out-store-reset-button {
    width: 82px;
    height: 30px;

    padding: 0 8px;

    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}


/* 검색 */
#productHeadOrderPage .store-out-store-search-button {
    border: 1px solid #315e48;
    background: #315e48;
    color: #ffffff;
}


/* 전체보기 */
#productHeadOrderPage .store-out-store-reset-button {
    border: 1px solid #d7e0da;
    background: #f7f9f7;
    color: #516158;
}