<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>스마트 폐기물 관리 시스템 - 재고 관리</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style data-purpose="global-font-scale">html{font-size:18px}.app-brand,.app-brand *{font-size:16px}</style>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  <style data-purpose="custom-styles">
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

    body {
      font-family: 'Noto Sans KR', sans-serif;
      background-color: #f1f5f9; /* Tailwind slate-100 */
    }

    /* Table Styles */
    .custom-table th, .custom-table td {
      border: 1px solid #cbd5e1; /* Tailwind slate-300 */
    }
    .custom-table th {
      background-color: #eaeaea;
      font-weight: 500;
      color: #334155;
      padding: 0.5rem;
      text-align: center;
      vertical-align: middle;
    }
    .custom-table td {
      padding: 0.5rem;
      color: #334155; /* Tailwind slate-700 */
      background-color: #ffffff;
    }
    .custom-table tbody tr:hover td {
      background-color: #f8fafc; /* Tailwind slate-50 */
    }

    /* Scrollbar for table container */
    .table-container {
      max-height: calc(100vh - 200px);
      overflow-y: auto;
    }

    /* Sidebar active state */
    .sidebar-link.active {
      background-color: #e0f0ff;
      color: #1e548a;
    }
  </style>
</head>
<body class="h-screen flex flex-col overflow-hidden text-sm">
  <!-- BEGIN: Top Header -->
  <header class="bg-white border-b border-slate-200 h-14 flex items-center justify-between px-4 shrink-0">
    <div class="flex items-center gap-2">
      <div class="w-8 h-8 bg-green-500 rounded-md flex items-center justify-center text-white">
        <i class="fa-solid fa-leaf"></i>
      </div>
      <h1 class="text-xl font-bold text-slate-800">스마트 폐기물 관리 시스템</h1>
    </div>
    <div>
      <button class="p-2 text-slate-500 hover:text-slate-700">
        <i class="fa-solid fa-arrow-right-from-bracket text-lg"></i>
      </button>
    </div>
  </header>
  <!-- END: Top Header -->

  <div class="flex flex-1 overflow-hidden relative">
    <!-- BEGIN: Left Sidebar -->
    <aside class="w-20 bg-white border-r border-slate-200 flex flex-col items-center py-4 gap-2 shrink-0 overflow-y-auto">
      <a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
        <i class="fa-solid fa-border-all text-xl mb-1"></i>
        <span class="text-[10px]">기본정보관리</span>
      </a>
      <a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
        <i class="fa-solid fa-boxes-stacked text-xl mb-1"></i>
        <span class="text-[10px]">발주/입고 관리</span>
      </a>
      <a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
        <i class="fa-solid fa-truck-ramp-box text-xl mb-1"></i>
        <span class="text-[10px]">불출 관리</span>
      </a>
      <a class="sidebar-link active w-full flex flex-col items-center justify-center py-3 text-sky-700 transition-colors" href="#">
        <i class="fa-solid fa-warehouse text-xl mb-1"></i>
        <span class="text-[10px]">재고 관리</span>
      </a>
      <a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
        <i class="fa-solid fa-cart-shopping text-xl mb-1"></i>
        <span class="text-[10px]">판매 관리</span>
      </a>
      <a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
        <i class="fa-solid fa-chart-pie text-xl mb-1"></i>
        <span class="text-[10px]">판매 현황</span>
      </a>
      <a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
        <i class="fa-solid fa-chart-line text-xl mb-1"></i>
        <span class="text-[10px]">통계/분석 관리</span>
      </a>
      <a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
        <i class="fa-solid fa-gear text-xl mb-1"></i>
        <span class="text-[10px]">설정</span>
      </a>
      <a class="sidebar-link w-full flex flex-col items-center justify-center py-3 text-slate-600 hover:bg-slate-50 transition-colors" href="#">
        <i class="fa-regular fa-circle-question text-xl mb-1"></i>
        <span class="text-[10px]">도움말</span>
      </a>
      <div class="mt-auto pt-4">
        <button class="p-2 text-slate-400 hover:text-slate-600">
          <i class="fa-solid fa-arrow-right-to-bracket text-lg"></i>
        </button>
      </div>
    </aside>
    <!-- END: Left Sidebar -->

    <!-- BEGIN: Main Content Area -->
    <main class="flex-1 p-4 bg-slate-100 flex flex-col overflow-hidden min-w-0">
      <!-- BEGIN: Filter Bar -->
      <section class="bg-white border border-slate-200 rounded shadow-sm p-3 mb-4 flex flex-wrap items-center justify-between gap-4 shrink-0">
        <div class="flex flex-wrap items-center gap-4">
          <div class="flex items-center gap-2">
            <label class="font-medium text-slate-700 whitespace-nowrap">조회기간:</label>
            <input class="border border-slate-300 rounded px-2 py-1.5 text-sm focus:ring-sky-500 focus:border-sky-500 w-52" readonly type="text" value="2024.01.01 ~ 2025.12.12"/>
          </div>
          <div class="flex items-center gap-2">
            <label class="font-medium text-slate-700 whitespace-nowrap">봉투구분:</label>
            <select class="border border-slate-300 rounded px-2 py-1.5 text-sm focus:ring-sky-500 focus:border-sky-500 w-24">
              <option>전체</option>
            </select>
          </div>
          <div class="flex items-center gap-2">
            <label class="font-medium text-slate-700 whitespace-nowrap">봉투형식:</label>
            <select class="border border-slate-300 rounded px-2 py-1.5 text-sm focus:ring-sky-500 focus:border-sky-500 w-28">
              <option>전체 봉투</option>
            </select>
          </div>
          <div class="flex items-center gap-2">
            <label class="font-medium text-slate-700 whitespace-nowrap">대행소:</label>
            <select class="border border-slate-300 rounded px-2 py-1.5 text-sm focus:ring-sky-500 focus:border-sky-500 w-24">
              <option>북구</option>
            </select>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <button class="bg-[#243a5e] hover:brightness-110 text-white px-4 py-1.5 rounded text-sm font-medium flex items-center gap-1 transition-colors">
            <i class="fa-solid fa-magnifying-glass"></i> 검색
          </button>
          <button class="bg-white border border-[#2e7d32] text-[#2e7d32] hover:bg-green-50 px-4 py-1.5 rounded text-sm font-medium flex items-center gap-1 transition-colors">
            <i class="fa-regular fa-file-excel"></i> Excel 내보내기
          </button>
          <button class="bg-white border border-slate-300 text-black hover:bg-slate-50 px-4 py-1.5 rounded text-sm font-medium flex items-center gap-1 transition-colors">
            <i class="fa-solid fa-print"></i> 인쇄
          </button>
          <button class="bg-[#e53935] hover:bg-red-600 text-white px-4 py-1.5 rounded text-sm font-medium flex items-center gap-1 transition-colors">
            <i class="fa-solid fa-power-off"></i> 종료
          </button>
        </div>
      </section>
      <!-- END: Filter Bar -->

      <!-- BEGIN: Data Table -->
      <section class="bg-white border border-slate-200 rounded shadow-sm flex-1 flex flex-col overflow-hidden">
        <div class="table-container flex-1 w-full overflow-auto">
          <table class="custom-table w-full whitespace-nowrap table-auto border-collapse">
            <thead class="sticky top-0 z-10 shadow-sm">
              <tr>
                <th class="w-48 sticky left-0 z-20" rowspan="2">품목</th>
                <th class="w-24" rowspan="2">전일재고</th>
                <th class="w-72" colspan="3">입고</th>
                <th class="w-96" colspan="5">출고</th>
                <th class="w-24" rowspan="2">잔량</th>
              </tr>
              <tr>
                <th class="w-24">입고</th>
                <th class="w-24">반품</th>
                <th class="w-24">입고계</th>
                <th class="w-24">판매</th>
                <th class="w-24 text-xs leading-tight">임의불출/무상불출</th>
                <th class="w-24">반품</th>
                <th class="w-24">기타</th>
                <th class="w-24">출고계</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 5L</td>
                <td class="text-right">187,240</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">0</td>
                <td class="text-right">0</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">0</td>
                <td class="text-right">0</td>
                <td class="text-right font-medium">187,240</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 5L</td>
                <td class="text-right">0</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">0</td>
                <td class="text-right">0</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">0</td>
                <td class="text-right">0</td>
                <td class="text-right font-medium">0</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 10L</td>
                <td class="text-right">159,428</td>
                <td class="text-right">252,000</td>
                <td class="text-right"></td>
                <td class="text-right font-medium">252,800</td>
                <td class="text-right">8,580</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">8,580</td>
                <td class="text-right font-medium">8,990</td>
                <td class="text-right font-medium">402,848</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 20L</td>
                <td class="text-right">212,082</td>
                <td class="text-right">201,000</td>
                <td class="text-right"></td>
                <td class="text-right font-medium">201,600</td>
                <td class="text-right">11,320</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">11,320</td>
                <td class="text-right font-medium">11,320</td>
                <td class="text-right font-medium">402,355</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 50L</td>
                <td class="text-right">7,605</td>
                <td class="text-right">13,000</td>
                <td class="text-right"></td>
                <td class="text-right font-medium">13,000</td>
                <td class="text-right">540</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">540</td>
                <td class="text-right font-medium">540</td>
                <td class="text-right font-medium">20,065</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 75L</td>
                <td class="text-right">31,459</td>
                <td class="text-right">22,600</td>
                <td class="text-right"></td>
                <td class="text-right font-medium">22,600</td>
                <td class="text-right">2,990</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">2,090</td>
                <td class="text-right font-medium">3,640</td>
                <td class="text-right font-medium">86,240</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 100L</td>
                <td class="text-right">11</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right font-medium">0</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">0</td>
                <td class="text-right font-medium">0</td>
                <td class="text-right font-medium">11</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">일반용 70L</td>
                <td class="text-right">77,400</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right font-medium">0</td>
                <td class="text-right"></td>
                <td class="text-right">1,000</td>
                <td class="text-right"></td>
                <td class="text-right">1,000</td>
                <td class="text-right font-medium">1,000</td>
                <td class="text-right font-medium">76,400</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">공동주택용 20L</td>
                <td class="text-right">0</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right font-medium">0</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">0</td>
                <td class="text-right font-medium">0</td>
                <td class="text-right font-medium">0</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">공동주택용 50L</td>
                <td class="text-right">0</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right font-medium">0</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">0</td>
                <td class="text-right font-medium">0</td>
                <td class="text-right font-medium">0</td>
              </tr>
              <tr>
                <td class="sticky left-0 bg-white text-left font-medium z-10 shadow-[1px_0_0_#cbd5e1]">재사용 봉투</td>
                <td class="text-right">58,540</td>
                <td class="text-right">27,000</td>
                <td class="text-right"></td>
                <td class="text-right font-medium">27,000</td>
                <td class="text-right">560</td>
                <td class="text-right"></td>
                <td class="text-right"></td>
                <td class="text-right">560</td>
                <td class="text-right font-medium">560</td>
                <td class="text-right font-medium">84,990</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <!-- END: Data Table -->
    </main>
    <!-- END: Main Content Area -->
  </div>

  <!-- BEGIN: Footer / Status Bar -->
  <footer class="bg-[#e2e8f0] border-t border-slate-300 h-8 flex items-center justify-between px-4 shrink-0 text-xs text-slate-600">
    <div>Ready.....</div>
    <div class="flex gap-4">
      <span>북구</span>
      <span>Ver..</span>
      <span>2025.12.12 (금) 3:00:32PM</span>
    </div>
  </footer>
  <!-- END: Footer / Status Bar -->
</body>
</html>
