feat(admin): 기간별 사용약품 조회 페이지 완성

- /admin/drug-usage 페이지 + API 3개 구현
- GET /api/drug-usage: 기간별 약품 통계 (조제건수, 입고건수)
- GET /api/drug-usage/<code>/imports: 약품별 입고 상세
- GET /api/drug-usage/<code>/prescriptions: 약품별 조제 상세

UX 개선:
- 약품 클릭 시 입고/조제 상세 펼침 패널
- table-layout:fixed + colgroup으로 컬럼 너비 고정
- white-space:nowrap으로 날짜/숫자 줄바꿈 방지
- 금액/거래처 사이 border로 구분선 추가
- 발행기관 OrderName으로 수정 (InsName 오류 수정)

QT_GUI 데이터와 100% 일치 검증 (살라겐정)

backend/app.py

@@ -3498,6 +3498,12 @@ def admin_products():
     return render_template('admin_products.html')
 
 
+@app.route('/admin/drug-usage')
+def admin_drug_usage():
+    """기간별 사용약품 조회 페이지"""
+    return render_template('admin_drug_usage.html')
+
+
 @app.route('/admin/members')
 def admin_members():
     """회원 검색 페이지 (팜IT3000 CD_PERSON, 알림톡/SMS 발송)"""
@@ -8828,6 +8834,113 @@ def api_drug_usage():
         }), 500
 
 
+@app.route('/api/drug-usage/<drug_code>/imports')
+def api_drug_usage_imports(drug_code):
+    """약품별 입고 상세 API"""
+    start_date = request.args.get('start_date', '')
+    end_date = request.args.get('end_date', '')
+    
+    if not start_date or not end_date:
+        return jsonify({'success': False, 'error': 'start_date, end_date 필수'}), 400
+    
+    try:
+        drug_session = db_manager.get_session('PM_DRUG')
+        
+        result = drug_session.execute(text("""
+            SELECT 
+                wm.WH_DT_appl as import_date,
+                ws.WH_NM_item_a as quantity,
+                ws.WH_MY_unit_a as unit_price,
+                c.CD_NM_custom as supplier_name,
+                c.CD_NM_charge1 as contact_person
+            FROM WH_sub ws
+            INNER JOIN WH_main wm ON ws.WH_SR_stock = wm.WH_NO_stock
+            LEFT JOIN PM_BASE.dbo.CD_custom c ON wm.WH_CD_cust_sale = c.CD_CD_custom
+            WHERE ws.DrugCode = :drug_code
+              AND wm.WH_DT_appl BETWEEN :start_date AND :end_date
+            ORDER BY wm.WH_DT_appl DESC
+        """), {'drug_code': drug_code, 'start_date': start_date, 'end_date': end_date})
+        
+        items = []
+        for row in result:
+            qty = float(row.quantity) if row.quantity else 0
+            price = float(row.unit_price) if row.unit_price else 0
+            items.append({
+                'import_date': row.import_date or '',
+                'quantity': qty,
+                'unit_price': price,
+                'amount': qty * price,
+                'supplier_name': row.supplier_name or '',
+                'person_name': row.contact_person or ''
+            })
+        
+        return jsonify({
+            'success': True,
+            'drug_code': drug_code,
+            'total_count': len(items),
+            'items': items
+        })
+    except Exception as e:
+        logging.error(f"drug-usage imports API 오류: {e}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/drug-usage/<drug_code>/prescriptions')
+def api_drug_usage_prescriptions(drug_code):
+    """약품별 조제(매출) 상세 API"""
+    start_date = request.args.get('start_date', '')
+    end_date = request.args.get('end_date', '')
+    
+    if not start_date or not end_date:
+        return jsonify({'success': False, 'error': 'start_date, end_date 필수'}), 400
+    
+    try:
+        pres_session = db_manager.get_session('PM_PRES')
+        
+        result = pres_session.execute(text("""
+            SELECT 
+                pm.Indate as rx_date,
+                CONVERT(varchar, DATEADD(day, sp.Days, CONVERT(date, pm.Indate, 112)), 112) as expiry_date,
+                pm.Paname as patient_name,
+                pm.OrderName as institution_name,
+                sp.QUAN as dosage,
+                sp.QUAN_TIME as frequency,
+                sp.Days as days
+            FROM PS_sub_pharm sp
+            INNER JOIN PS_main pm ON pm.PreSerial = sp.PreSerial
+            WHERE sp.DrugCode = :drug_code
+              AND pm.Indate BETWEEN :start_date AND :end_date
+              AND (sp.PS_Type IS NULL OR sp.PS_Type != '9')
+            ORDER BY pm.Indate DESC
+        """), {'drug_code': drug_code, 'start_date': start_date, 'end_date': end_date})
+        
+        items = []
+        for row in result:
+            dosage = float(row.dosage) if row.dosage else 0
+            freq = float(row.frequency) if row.frequency else 0
+            days = int(row.days) if row.days else 0
+            items.append({
+                'rx_date': row.rx_date or '',
+                'expiry_date': row.expiry_date or '',
+                'patient_name': row.patient_name or '',
+                'institution_name': row.institution_name or '',
+                'dosage': dosage,
+                'frequency': freq,
+                'days': days,
+                'total_qty': dosage * freq * days
+            })
+        
+        return jsonify({
+            'success': True,
+            'drug_code': drug_code,
+            'total_count': len(items),
+            'items': items
+        })
+    except Exception as e:
+        logging.error(f"drug-usage prescriptions API 오류: {e}")
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
 if __name__ == '__main__':
     import os
     

backend/check_2024_apc.py

@@ -0,0 +1,32 @@
+# -*- coding: utf-8 -*-
+import pyodbc
+
+conn_str = (
+    'DRIVER={ODBC Driver 17 for SQL Server};'
+    'SERVER=192.168.0.4\\PM2014;'
+    'DATABASE=PM_DRUG;'
+    'UID=sa;'
+    'PWD=tmddls214!%(;'
+    'TrustServerCertificate=yes;'
+)
+conn = pyodbc.connect(conn_str, timeout=10)
+cursor = conn.cursor()
+
+# 2024년 이후 APC (9xx로 시작) 확인
+cursor.execute('''
+    SELECT G.GoodsName, U.CD_CD_BARCODE
+    FROM CD_GOODS G
+    JOIN CD_ITEM_UNIT_MEMBER U ON G.DrugCode = U.DRUGCODE
+    WHERE G.POS_BOON = '010103'
+      AND G.GoodsSelCode = 'B'
+      AND U.CD_CD_BARCODE LIKE '9%'
+      AND LEN(U.CD_CD_BARCODE) = 13
+    ORDER BY G.GoodsName
+''')
+
+rows = cursor.fetchall()
+print(f'=== 2024년 이후 APC 제품: {len(rows)}건 ===')
+for row in rows:
+    print(f'  {row.GoodsName} | APC: {row.CD_CD_BARCODE}')
+
+conn.close()

backend/check_oridermyl.py

@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+from sqlalchemy import create_engine, text
+
+engine = create_engine('postgresql://admin:trajet6640@192.168.0.87:5432/apdb_master')
+with engine.connect() as conn:
+    # 오리더밀 검색
+    result = conn.execute(text("""
+        SELECT apc, product_name, item_seq, 
+               llm_pharm->>'분류' as category,
+               llm_pharm->>'간이분류' as easy_category,
+               image_url1
+        FROM apc 
+        WHERE product_name ILIKE '%오리더밀%'
+        ORDER BY apc
+    """))
+    
+    print('=== PostgreSQL 오리더밀 검색 결과 ===')
+    for row in result:
+        print(f'APC: {row.apc}')
+        print(f'  제품명: {row.product_name}')
+        print(f'  item_seq: {row.item_seq}')
+        print(f'  분류: {row.category}')
+        print(f'  간이분류: {row.easy_category}')
+        print(f'  이미지: {row.image_url1}')
+        print()

backend/check_real_2024_apc.py

@@ -0,0 +1,35 @@
+# -*- coding: utf-8 -*-
+import pyodbc
+
+conn_str = (
+    'DRIVER={ODBC Driver 17 for SQL Server};'
+    'SERVER=192.168.0.4\\PM2014;'
+    'DATABASE=PM_DRUG;'
+    'UID=sa;'
+    'PWD=tmddls214!%(;'
+    'TrustServerCertificate=yes;'
+)
+conn = pyodbc.connect(conn_str, timeout=10)
+cursor = conn.cursor()
+
+# 정식 2024년 APC (92%로 시작) 확인
+cursor.execute('''
+    SELECT G.GoodsName, U.CD_CD_BARCODE
+    FROM CD_GOODS G
+    JOIN CD_ITEM_UNIT_MEMBER U ON G.DrugCode = U.DRUGCODE
+    WHERE G.POS_BOON = '010103'
+      AND G.GoodsSelCode = 'B'
+      AND U.CD_CD_BARCODE LIKE '92%'
+      AND LEN(U.CD_CD_BARCODE) = 13
+    ORDER BY G.GoodsName
+''')
+
+rows = cursor.fetchall()
+print(f'=== 정식 2024년 APC (92%) 제품: {len(rows)}건 ===')
+for row in rows:
+    print(f'  {row.GoodsName} | APC: {row.CD_CD_BARCODE}')
+
+if len(rows) == 0:
+    print('  (없음 - 아직 2024년 이후 허가 제품이 등록 안 됨)')
+
+conn.close()

backend/check_tiergard.py

@@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+import pyodbc
+
+conn_str = (
+    'DRIVER={ODBC Driver 17 for SQL Server};'
+    'SERVER=192.168.0.4\\PM2014;'
+    'DATABASE=PM_DRUG;'
+    'UID=sa;'
+    'PWD=tmddls214!%(;'
+    'TrustServerCertificate=yes;'
+)
+conn = pyodbc.connect(conn_str, timeout=10)
+cursor = conn.cursor()
+
+cursor.execute('''
+    SELECT G.GoodsName, G.Saleprice, ISNULL(IT.IM_QT_sale_debit, 0) AS Stock
+    FROM CD_GOODS G
+    LEFT JOIN IM_total IT ON G.DrugCode = IT.DrugCode
+    WHERE G.GoodsName LIKE '%티어가드%'
+    ORDER BY G.GoodsName
+''')
+
+rows = cursor.fetchall()
+print('=== 티어가드 보유 현황 ===')
+for row in rows:
+    print(f'{row.GoodsName} | {row.Saleprice:,.0f}원 | 재고: {int(row.Stock)}개')
+
+conn.close()

backend/check_tiergard_detail.py

@@ -0,0 +1,26 @@
+# -*- coding: utf-8 -*-
+from sqlalchemy import create_engine, text
+import json
+
+engine = create_engine('postgresql://admin:trajet6640@192.168.0.87:5432/apdb_master')
+with engine.connect() as conn:
+    result = conn.execute(text("""
+        SELECT apc, product_name, llm_pharm, main_ingredient, component_name_ko
+        FROM apc 
+        WHERE product_name ILIKE '%티어가드%60mg%'
+        ORDER BY apc
+        LIMIT 3
+    """))
+    
+    print('=== 티어가드 60mg 허가사항 상세 ===')
+    for row in result:
+        print(f'APC: {row.apc}')
+        print(f'제품명: {row.product_name}')
+        print(f'main_ingredient: {row.main_ingredient}')
+        print(f'component_name_ko: {row.component_name_ko}')
+        if row.llm_pharm:
+            llm = row.llm_pharm if isinstance(row.llm_pharm, dict) else json.loads(row.llm_pharm)
+            print('llm_pharm 내용:')
+            for k, v in llm.items():
+                print(f'  {k}: {v}')
+        print()

backend/check_tiergard_llm.py

@@ -0,0 +1,27 @@
+# -*- coding: utf-8 -*-
+from sqlalchemy import create_engine, text
+import json
+
+engine = create_engine('postgresql://admin:trajet6640@192.168.0.87:5432/apdb_master')
+with engine.connect() as conn:
+    # llm_pharm이 있는 티어가드 확인
+    result = conn.execute(text("""
+        SELECT apc, product_name, llm_pharm
+        FROM apc 
+        WHERE product_name ILIKE '%티어가드%'
+          AND llm_pharm IS NOT NULL
+          AND llm_pharm::text != '{}'
+        ORDER BY apc
+    """))
+    
+    print('=== 티어가드 llm_pharm 있는 항목 ===')
+    for row in result:
+        print(f'APC: {row.apc}')
+        print(f'제품명: {row.product_name}')
+        if row.llm_pharm:
+            llm = row.llm_pharm if isinstance(row.llm_pharm, dict) else json.loads(row.llm_pharm)
+            print('llm_pharm:')
+            for k, v in llm.items():
+                if v:
+                    print(f'  {k}: {v}')
+        print()

backend/check_tiergard_pg.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+from sqlalchemy import create_engine, text
+
+engine = create_engine('postgresql://admin:trajet6640@192.168.0.87:5432/apdb_master')
+with engine.connect() as conn:
+    result = conn.execute(text("""
+        SELECT apc, product_name, 
+               llm_pharm->>'체중/부위' as dosage,
+               llm_pharm->>'주성분' as ingredient
+        FROM apc 
+        WHERE product_name ILIKE '%티어가드%'
+        ORDER BY apc
+    """))
+    
+    print('=== PostgreSQL 티어가드 전체 규격 ===')
+    for row in result:
+        print(f'APC: {row.apc}')
+        print(f'  제품명: {row.product_name}')
+        print(f'  용량: {row.dosage}')
+        print(f'  성분: {row.ingredient}')
+        print()

backend/templates/admin_drug_usage.html

@@ -0,0 +1,967 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>기간별 사용약품 조회 - 청춘약국</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: #f8fafc;
+            -webkit-font-smoothing: antialiased;
+            color: #1e293b;
+        }
+
+        /* ── 헤더 ── */
+        .header {
+            background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
+            padding: 28px 32px 24px;
+            color: #fff;
+        }
+        .header-nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 16px;
+        }
+        .header-nav a {
+            color: rgba(255,255,255,0.8);
+            text-decoration: none;
+            font-size: 14px;
+            font-weight: 500;
+        }
+        .header-nav a:hover { color: #fff; }
+        .header h1 {
+            font-size: 24px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            margin-bottom: 6px;
+        }
+        .header p {
+            font-size: 14px;
+            opacity: 0.85;
+        }
+
+        /* ── 컨텐츠 ── */
+        .content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 24px 20px 60px;
+        }
+
+        /* ── 검색 영역 ── */
+        .search-section {
+            background: #fff;
+            border-radius: 14px;
+            padding: 24px;
+            margin-bottom: 20px;
+            border: 1px solid #e2e8f0;
+        }
+        .search-row {
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+            align-items: flex-end;
+        }
+        .search-group {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+        .search-group label {
+            font-size: 12px;
+            font-weight: 600;
+            color: #64748b;
+        }
+        .date-range {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .date-input {
+            padding: 12px 14px;
+            border: 2px solid #e2e8f0;
+            border-radius: 10px;
+            font-size: 14px;
+            font-family: inherit;
+            transition: all 0.2s;
+            width: 160px;
+        }
+        .date-input:focus {
+            outline: none;
+            border-color: #10b981;
+            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
+        }
+        .date-range span {
+            color: #94a3b8;
+            font-size: 14px;
+        }
+        .radio-group {
+            display: flex;
+            gap: 16px;
+            padding: 10px 0;
+        }
+        .radio-group label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            font-size: 14px;
+            color: #475569;
+        }
+        .radio-group input[type="radio"] {
+            width: 18px;
+            height: 18px;
+            accent-color: #10b981;
+            cursor: pointer;
+        }
+        .search-input {
+            flex: 1;
+            min-width: 200px;
+            padding: 12px 16px;
+            border: 2px solid #e2e8f0;
+            border-radius: 10px;
+            font-size: 14px;
+            font-family: inherit;
+            transition: all 0.2s;
+        }
+        .search-input:focus {
+            outline: none;
+            border-color: #10b981;
+            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
+        }
+        .search-input::placeholder {
+            color: #94a3b8;
+        }
+        .search-btn {
+            background: #10b981;
+            color: #fff;
+            border: none;
+            padding: 12px 28px;
+            border-radius: 10px;
+            font-size: 15px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            white-space: nowrap;
+        }
+        .search-btn:hover { background: #059669; }
+        .search-btn:active { transform: scale(0.98); }
+        .search-btn:disabled {
+            background: #94a3b8;
+            cursor: not-allowed;
+        }
+
+        /* ── 결과 카운트 ── */
+        .result-count {
+            margin-bottom: 16px;
+            font-size: 14px;
+            color: #64748b;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .result-count strong {
+            color: #10b981;
+            font-weight: 700;
+        }
+        .result-period {
+            font-size: 13px;
+            color: #94a3b8;
+        }
+
+        /* ── 테이블 ── */
+        .table-wrap {
+            background: #fff;
+            border-radius: 14px;
+            border: 1px solid #e2e8f0;
+            overflow: hidden;
+        }
+        .table-scroll {
+            overflow-x: auto;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            min-width: 800px;
+        }
+        thead th {
+            background: #f8fafc;
+            padding: 14px 16px;
+            font-size: 12px;
+            font-weight: 600;
+            color: #64748b;
+            text-align: left;
+            border-bottom: 1px solid #e2e8f0;
+            white-space: nowrap;
+            cursor: pointer;
+            user-select: none;
+            transition: background 0.15s;
+        }
+        thead th:hover {
+            background: #f1f5f9;
+        }
+        thead th.sortable::after {
+            content: ' ↕';
+            color: #cbd5e1;
+        }
+        thead th.sort-asc::after {
+            content: ' ↑';
+            color: #10b981;
+        }
+        thead th.sort-desc::after {
+            content: ' ↓';
+            color: #10b981;
+        }
+        tbody td {
+            padding: 14px 16px;
+            font-size: 14px;
+            color: #334155;
+            border-bottom: 1px solid #f1f5f9;
+            vertical-align: middle;
+        }
+        tbody tr:hover { background: #f0fdf4; }
+        tbody tr:last-child td { border-bottom: none; }
+
+        /* ── 코드 스타일 ── */
+        .code {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
+            padding: 4px 8px;
+            border-radius: 6px;
+            display: inline-block;
+            background: #d1fae5;
+            color: #065f46;
+        }
+        .category-badge {
+            display: inline-block;
+            background: #ede9fe;
+            color: #7c3aed;
+            font-size: 11px;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-weight: 500;
+        }
+        .product-name {
+            font-weight: 600;
+            color: #1e293b;
+        }
+
+        /* ── 숫자 스타일 ── */
+        .num-cell {
+            text-align: right;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .num-highlight {
+            color: #10b981;
+            font-weight: 600;
+        }
+        .num-secondary {
+            color: #3b82f6;
+        }
+
+        /* ── 빈 상태 ── */
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #94a3b8;
+        }
+        .empty-state .icon {
+            font-size: 48px;
+            margin-bottom: 16px;
+        }
+        .empty-state p {
+            font-size: 15px;
+        }
+
+        /* ── 로딩 상태 ── */
+        .loading-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #64748b;
+        }
+        .loading-spinner {
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            border: 3px solid #e2e8f0;
+            border-top-color: #10b981;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 16px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* ── 페이지네이션 ── */
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 8px;
+            margin-top: 20px;
+            flex-wrap: wrap;
+        }
+        .pagination-btn {
+            padding: 8px 14px;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            background: #fff;
+            color: #475569;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.15s;
+        }
+        .pagination-btn:hover:not(:disabled) {
+            background: #f1f5f9;
+            border-color: #cbd5e1;
+        }
+        .pagination-btn.active {
+            background: #10b981;
+            color: #fff;
+            border-color: #10b981;
+        }
+        .pagination-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .pagination-info {
+            color: #64748b;
+            font-size: 13px;
+            margin: 0 12px;
+        }
+
+        /* ── 상세 패널 ── */
+        .detail-row td {
+            /* padding removed - handled by detail-table */
+            background: #f0fdf4;
+        }
+        .detail-panel {
+            display: flex;
+            gap: 16px;
+            padding: 20px;
+            border-top: 2px solid #10b981;
+        }
+        .detail-left, .detail-right {
+            flex: 1;
+            background: #fff;
+            border-radius: 10px;
+            padding: 16px;
+            border: 1px solid #e2e8f0;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        .detail-left h4, .detail-right h4 {
+            font-size: 14px;
+            font-weight: 600;
+            color: #1e293b;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .detail-left h4 .count, .detail-right h4 .count {
+            font-size: 12px;
+            color: #10b981;
+            font-weight: 500;
+        }
+        .detail-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            font-size: 12px;
+            min-width: 0;
+            table-layout: fixed;
+        }
+        .detail-table td, .detail-table th {
+            padding: 4px 8px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .truncate-cell {
+            max-width: 120px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .detail-table thead th {
+            background: #f8fafc;
+            padding: 8px 10px;
+            font-size: 11px;
+            font-weight: 600;
+            color: #64748b;
+            text-align: left;
+            border-bottom: 1px solid #e2e8f0;
+            white-space: nowrap;
+        }
+        .detail-table tbody td {
+            padding: 8px 10px;
+            font-size: 12px;
+            color: #334155;
+            border-bottom: 1px solid #f1f5f9;
+        }
+        .detail-table tbody tr:last-child td {
+            border-bottom: none;
+        }
+        .detail-loading {
+            text-align: center;
+            padding: 30px;
+            color: #94a3b8;
+        }
+        .detail-empty {
+            text-align: center;
+            padding: 30px;
+            color: #94a3b8;
+            font-size: 13px;
+        }
+        tbody tr.clickable {
+            cursor: pointer;
+        }
+        tbody tr.clickable:hover {
+            background: #ecfdf5;
+        }
+        tbody tr.expanded {
+            background: #d1fae5 !important;
+        }
+
+        /* ── 반응형 ── */
+        @media (max-width: 768px) {
+            .search-row { flex-direction: column; }
+            .date-range { flex-wrap: wrap; }
+            .date-input { width: 100%; }
+            .search-input { width: 100%; }
+            .detail-panel { flex-direction: column; }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="header-nav">
+            <a href="/admin">← 관리자 홈</a>
+            <div>
+                <a href="/admin/rx-usage" style="margin-right: 16px;">전문약 사용량</a>
+                <a href="/admin/products">제품 검색</a>
+            </div>
+        </div>
+        <h1>📊 기간별 사용약품 조회</h1>
+        <p>기간 내 조제 및 입고 현황을 한눈에 확인</p>
+    </div>
+
+    <div class="content">
+        <!-- 검색 -->
+        <div class="search-section">
+            <div class="search-row">
+                <div class="search-group">
+                    <label>📅 기간</label>
+                    <div class="date-range">
+                        <input type="date" class="date-input" id="startDate">
+                        <span>~</span>
+                        <input type="date" class="date-input" id="endDate">
+                    </div>
+                </div>
+                <div class="search-group">
+                    <label>📌 기준</label>
+                    <div class="radio-group">
+                        <label>
+                            <input type="radio" name="dateType" value="dispense" checked>
+                            조제일
+                        </label>
+                        <label>
+                            <input type="radio" name="dateType" value="expiry">
+                            소진일
+                        </label>
+                    </div>
+                </div>
+                <div class="search-group" style="flex: 1;">
+                    <label>🔍 약품명 검색</label>
+                    <input type="text" class="search-input" id="searchInput" 
+                           placeholder="약품명 입력 (선택사항)"
+                           onkeypress="if(event.key==='Enter')searchDrugUsage()">
+                </div>
+                <button class="search-btn" id="searchBtn" onclick="searchDrugUsage()">🔍 조회</button>
+            </div>
+        </div>
+
+        <!-- 결과 카운트 -->
+        <div class="result-count" id="resultInfo" style="display:none;">
+            <div>
+                검색 결과: <strong id="resultNum">0</strong>개 약품
+            </div>
+            <div class="result-period" id="resultPeriod"></div>
+        </div>
+
+        <!-- 테이블 -->
+        <div class="table-wrap">
+            <div class="table-scroll">
+                <table>
+                    <thead>
+                        <tr>
+                            <th class="sortable" data-sort="drug_code">약품코드</th>
+                            <th class="sortable" data-sort="goods_name">약품명</th>
+                            <th class="sortable" data-sort="category">분류</th>
+                            <th class="sortable sort-desc" data-sort="rx_count">조제건수</th>
+                            <th class="sortable" data-sort="import_count">입고건수</th>
+                            <th class="sortable" data-sort="rx_total_qty">조제량</th>
+                            <th class="sortable" data-sort="import_total_qty">입고량</th>
+                        </tr>
+                    </thead>
+                    <tbody id="drugUsageBody">
+                        <tr>
+                            <td colspan="7" class="empty-state">
+                                <div class="icon">📊</div>
+                                <p>기간을 선택하고 조회 버튼을 클릭하세요</p>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- 페이지네이션 -->
+        <div class="pagination" id="pagination" style="display:none;"></div>
+    </div>
+
+    <script>
+    // ═══ 상태 변수 ═══
+    let allData = [];
+    let filteredData = [];
+    let currentPage = 1;
+    const pageSize = 50;
+    let currentSort = { field: 'rx_count', dir: 'desc' };
+
+    // ═══ 초기화 ═══
+    document.addEventListener('DOMContentLoaded', function() {
+        // 기본 날짜 설정 (최근 3개월)
+        const today = new Date();
+        const threeMonthsAgo = new Date();
+        threeMonthsAgo.setMonth(today.getMonth() - 3);
+        
+        document.getElementById('endDate').value = formatDate(today);
+        document.getElementById('startDate').value = formatDate(threeMonthsAgo);
+        
+        // 정렬 헤더 이벤트
+        document.querySelectorAll('thead th.sortable').forEach(th => {
+            th.addEventListener('click', () => sortBy(th.dataset.sort));
+        });
+    });
+
+    function formatDate(date) {
+        return date.toISOString().split('T')[0];
+    }
+
+    function formatNumber(num) {
+        if (!num && num !== 0) return '-';
+        return new Intl.NumberFormat('ko-KR').format(num);
+    }
+
+    function escapeHtml(str) {
+        if (!str) return '';
+        return str.replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
+    }
+
+    // ═══ 조회 ═══
+    async function searchDrugUsage() {
+        const startDate = document.getElementById('startDate').value;
+        const endDate = document.getElementById('endDate').value;
+        const dateType = document.querySelector('input[name="dateType"]:checked').value;
+        const search = document.getElementById('searchInput').value.trim();
+
+        if (!startDate || !endDate) {
+            alert('기간을 선택하세요');
+            return;
+        }
+
+        const tbody = document.getElementById('drugUsageBody');
+        const btn = document.getElementById('searchBtn');
+        
+        // 로딩 상태
+        btn.disabled = true;
+        btn.textContent = '조회 중...';
+        tbody.innerHTML = `
+            <tr>
+                <td colspan="7" class="loading-state">
+                    <div class="loading-spinner"></div>
+                    <p>데이터를 불러오는 중...</p>
+                </td>
+            </tr>
+        `;
+
+        try {
+            const params = new URLSearchParams({
+                start_date: startDate.replace(/-/g, ''),
+                end_date: endDate.replace(/-/g, ''),
+                date_type: dateType,
+                limit: 1000  // 전체 조회 후 클라이언트에서 페이징
+            });
+            if (search) params.append('search', search);
+
+            const res = await fetch(`/api/drug-usage?${params}`);
+            const data = await res.json();
+
+            if (data.success) {
+                allData = data.items || [];
+                filteredData = [...allData];
+                currentPage = 1;
+                
+                // 결과 정보 표시
+                document.getElementById('resultInfo').style.display = 'flex';
+                document.getElementById('resultNum').textContent = filteredData.length;
+                document.getElementById('resultPeriod').textContent = 
+                    `${data.period?.start || startDate} ~ ${data.period?.end || endDate} (${dateType === 'dispense' ? '조제일' : '소진일'} 기준)`;
+                
+                // 기본 정렬 적용
+                sortData();
+                renderTable();
+                renderPagination();
+            } else {
+                tbody.innerHTML = `
+                    <tr>
+                        <td colspan="7" class="empty-state">
+                            <div class="icon">⚠️</div>
+                            <p>오류: ${escapeHtml(data.error || '알 수 없는 오류')}</p>
+                        </td>
+                    </tr>
+                `;
+            }
+        } catch (err) {
+            tbody.innerHTML = `
+                <tr>
+                    <td colspan="7" class="empty-state">
+                        <div class="icon">❌</div>
+                        <p>조회 실패: ${escapeHtml(err.message)}</p>
+                    </td>
+                </tr>
+            `;
+        } finally {
+            btn.disabled = false;
+            btn.textContent = '🔍 조회';
+        }
+    }
+
+    // ═══ 정렬 ═══
+    function sortBy(field) {
+        // 같은 필드면 방향 토글
+        if (currentSort.field === field) {
+            currentSort.dir = currentSort.dir === 'desc' ? 'asc' : 'desc';
+        } else {
+            currentSort.field = field;
+            currentSort.dir = 'desc';
+        }
+        
+        // 헤더 표시 업데이트
+        document.querySelectorAll('thead th.sortable').forEach(th => {
+            th.classList.remove('sort-asc', 'sort-desc');
+            if (th.dataset.sort === field) {
+                th.classList.add(currentSort.dir === 'asc' ? 'sort-asc' : 'sort-desc');
+            }
+        });
+        
+        sortData();
+        currentPage = 1;
+        renderTable();
+        renderPagination();
+    }
+
+    function sortData() {
+        const { field, dir } = currentSort;
+        
+        filteredData.sort((a, b) => {
+            let aVal = a[field];
+            let bVal = b[field];
+            
+            // 숫자 필드
+            if (['rx_count', 'import_count', 'rx_total_qty', 'import_total_qty'].includes(field)) {
+                aVal = Number(aVal) || 0;
+                bVal = Number(bVal) || 0;
+            } else {
+                // 문자열 필드
+                aVal = String(aVal || '').toLowerCase();
+                bVal = String(bVal || '').toLowerCase();
+            }
+            
+            if (aVal < bVal) return dir === 'asc' ? -1 : 1;
+            if (aVal > bVal) return dir === 'asc' ? 1 : -1;
+            return 0;
+        });
+    }
+
+    // ═══ 상세 패널 상태 ═══
+    let expandedDrugCode = null;
+
+    // ═══ 렌더링 ═══
+    function renderTable() {
+        const tbody = document.getElementById('drugUsageBody');
+        
+        if (filteredData.length === 0) {
+            tbody.innerHTML = `
+                <tr>
+                    <td colspan="7" class="empty-state">
+                        <div class="icon">📭</div>
+                        <p>조회 결과가 없습니다</p>
+                    </td>
+                </tr>
+            `;
+            document.getElementById('pagination').style.display = 'none';
+            return;
+        }
+        
+        // 페이지 데이터 추출
+        const start = (currentPage - 1) * pageSize;
+        const pageData = filteredData.slice(start, start + pageSize);
+        
+        tbody.innerHTML = pageData.map(item => `
+            <tr class="clickable ${expandedDrugCode === item.drug_code ? 'expanded' : ''}" 
+                data-drug-code="${escapeHtml(item.drug_code)}"
+                onclick="toggleDetail('${escapeHtml(item.drug_code)}')">
+                <td><span class="code">${escapeHtml(item.drug_code)}</span></td>
+                <td><span class="product-name">${escapeHtml(item.goods_name)}</span></td>
+                <td>${item.category ? `<span class="category-badge">${escapeHtml(item.category)}</span>` : '<span style="color:#94a3b8;">-</span>'}</td>
+                <td class="num-cell num-highlight">${formatNumber(item.rx_count)}</td>
+                <td class="num-cell num-secondary">${formatNumber(item.import_count)}</td>
+                <td class="num-cell num-highlight">${formatNumber(item.rx_total_qty)}</td>
+                <td class="num-cell num-secondary">${formatNumber(item.import_total_qty)}</td>
+            </tr>
+            <tr class="detail-row" id="detail-${escapeHtml(item.drug_code)}" style="display:${expandedDrugCode === item.drug_code ? 'table-row' : 'none'};">
+                <td colspan="7">
+                    <div class="detail-panel">
+                        <div class="detail-left" id="imports-${escapeHtml(item.drug_code)}">
+                            <h4>📦 입고목록 <span class="count"></span></h4>
+                            <div class="detail-loading">불러오는 중...</div>
+                        </div>
+                        <div class="detail-right" id="prescriptions-${escapeHtml(item.drug_code)}">
+                            <h4>💊 조제목록 <span class="count"></span></h4>
+                            <div class="detail-loading">불러오는 중...</div>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        `).join('');
+    }
+
+    // ═══ 상세 패널 토글 ═══
+    async function toggleDetail(drugCode) {
+        const detailRow = document.getElementById(`detail-${drugCode}`);
+        const mainRow = document.querySelector(`tr[data-drug-code="${drugCode}"]`);
+        
+        // 같은 행 클릭 시 닫기
+        if (expandedDrugCode === drugCode) {
+            detailRow.style.display = 'none';
+            mainRow.classList.remove('expanded');
+            expandedDrugCode = null;
+            return;
+        }
+        
+        // 다른 행이 열려있으면 닫기
+        if (expandedDrugCode) {
+            const prevDetail = document.getElementById(`detail-${expandedDrugCode}`);
+            const prevMain = document.querySelector(`tr[data-drug-code="${expandedDrugCode}"]`);
+            if (prevDetail) prevDetail.style.display = 'none';
+            if (prevMain) prevMain.classList.remove('expanded');
+        }
+        
+        // 현재 행 열기
+        detailRow.style.display = 'table-row';
+        mainRow.classList.add('expanded');
+        expandedDrugCode = drugCode;
+        
+        // 데이터 로드
+        const startDate = document.getElementById('startDate').value.replace(/-/g, '');
+        const endDate = document.getElementById('endDate').value.replace(/-/g, '');
+        
+        // 입고 데이터 로드
+        loadImports(drugCode, startDate, endDate);
+        // 조제 데이터 로드
+        loadPrescriptions(drugCode, startDate, endDate);
+    }
+
+    // ═══ 입고 데이터 로드 ═══
+    async function loadImports(drugCode, startDate, endDate) {
+        const container = document.getElementById(`imports-${drugCode}`);
+        
+        try {
+            const res = await fetch(`/api/drug-usage/${drugCode}/imports?start_date=${startDate}&end_date=${endDate}`);
+            const data = await res.json();
+            
+            if (data.success && data.items.length > 0) {
+                container.innerHTML = `
+                    <h4>📦 입고목록 <span class="count">(${data.total_count}건)</span></h4>
+                    <table class="detail-table" style="table-layout:fixed;">
+                        <colgroup>
+                            <col style="width:70px;">
+                            <col style="width:55px;">
+                            <col style="width:45px;">
+                            <col style="width:65px;">
+                            <col style="width:auto;">
+                            <col style="width:50px;">
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th>입고일자</th>
+                                <th>수량</th>
+                                <th>단가</th>
+                                <th>금액</th>
+                                <th>거래처</th>
+                                <th>담당자</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${data.items.map(item => `
+                                <tr>
+                                    <td style="white-space:nowrap;padding:4px 6px;">${formatDetailDate(item.import_date)}</td>
+                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${formatNumber(item.quantity)}</td>
+                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${formatNumber(item.unit_price)}</td>
+                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;border-right:1px solid #ccc;">${formatNumber(item.amount)}</td>
+                                    <td class="truncate-cell" style="padding:4px 6px;" title="${escapeHtml(item.supplier_name)}">${escapeHtml(item.supplier_name)}</td>
+                                    <td style="white-space:nowrap;padding:4px 6px;">${escapeHtml(item.person_name)}</td>
+                                </tr>
+                            `).join('')}
+                        </tbody>
+                    </table>
+                `;
+            } else {
+                container.innerHTML = `
+                    <h4>📦 입고목록 <span class="count">(0건)</span></h4>
+                    <div class="detail-empty">입고 내역이 없습니다</div>
+                `;
+            }
+        } catch (err) {
+            container.innerHTML = `
+                <h4>📦 입고목록</h4>
+                <div class="detail-empty">⚠️ 로드 실패: ${escapeHtml(err.message)}</div>
+            `;
+        }
+    }
+
+    // ═══ 조제 데이터 로드 ═══
+    async function loadPrescriptions(drugCode, startDate, endDate) {
+        const container = document.getElementById(`prescriptions-${drugCode}`);
+        
+        try {
+            const res = await fetch(`/api/drug-usage/${drugCode}/prescriptions?start_date=${startDate}&end_date=${endDate}`);
+            const data = await res.json();
+            
+            if (data.success && data.items.length > 0) {
+                container.innerHTML = `
+                    <h4>💊 조제목록 <span class="count">(${data.total_count}건)</span></h4>
+                    <table class="detail-table" style="table-layout:fixed;">
+                        <colgroup>
+                            <col style="width:65px;">
+                            <col style="width:65px;">
+                            <col style="width:55px;">
+                            <col style="width:auto;">
+                            <col style="width:45px;">
+                            <col style="width:35px;">
+                            <col style="width:35px;">
+                            <col style="width:55px;">
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th>조제일</th>
+                                <th>만료일</th>
+                                <th>고객명</th>
+                                <th>발행기관</th>
+                                <th>투약량</th>
+                                <th>횟수</th>
+                                <th>일수</th>
+                                <th>총투약량</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${data.items.map(item => `
+                                <tr>
+                                    <td style="white-space:nowrap;padding:4px 6px;">${formatDetailDate(item.rx_date)}</td>
+                                    <td style="white-space:nowrap;padding:4px 6px;">${formatDetailDate(item.expiry_date)}</td>
+                                    <td style="white-space:nowrap;padding:4px 6px;">${escapeHtml(item.patient_name)}</td>
+                                    <td class="truncate-cell" style="padding:4px 6px;" title="${escapeHtml(item.institution_name)}">${escapeHtml(item.institution_name)}</td>
+                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${item.dosage}</td>
+                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${item.frequency}</td>
+                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${item.days}</td>
+                                    <td style="text-align:right;white-space:nowrap;padding:4px 6px;">${formatNumber(item.total_qty)}</td>
+                                </tr>
+                            `).join('')}
+                        </tbody>
+                    </table>
+                `;
+            } else {
+                container.innerHTML = `
+                    <h4>💊 조제목록 <span class="count">(0건)</span></h4>
+                    <div class="detail-empty">조제 내역이 없습니다</div>
+                `;
+            }
+        } catch (err) {
+            container.innerHTML = `
+                <h4>💊 조제목록</h4>
+                <div class="detail-empty">⚠️ 로드 실패: ${escapeHtml(err.message)}</div>
+            `;
+        }
+    }
+
+    // ═══ 날짜 포맷 (YYYYMMDD → YYYY-MM-DD) ═══
+    function formatDetailDate(dateStr) {
+        if (!dateStr || dateStr.length !== 8) return dateStr || '-';
+        return `${dateStr.slice(2,4)}-${dateStr.slice(4,6)}-${dateStr.slice(6,8)}`;
+    }
+
+    function renderPagination() {
+        const pagination = document.getElementById('pagination');
+        const totalPages = Math.ceil(filteredData.length / pageSize);
+        
+        if (totalPages <= 1) {
+            pagination.style.display = 'none';
+            return;
+        }
+        
+        pagination.style.display = 'flex';
+        
+        let html = '';
+        
+        // 이전 버튼
+        html += `<button class="pagination-btn" ${currentPage <= 1 ? 'disabled' : ''} onclick="goToPage(${currentPage - 1})">◀ 이전</button>`;
+        
+        // 페이지 번호
+        const maxVisible = 5;
+        let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+        let endPage = Math.min(totalPages, startPage + maxVisible - 1);
+        if (endPage - startPage < maxVisible - 1) {
+            startPage = Math.max(1, endPage - maxVisible + 1);
+        }
+        
+        if (startPage > 1) {
+            html += `<button class="pagination-btn" onclick="goToPage(1)">1</button>`;
+            if (startPage > 2) html += `<span style="color:#94a3b8;">...</span>`;
+        }
+        
+        for (let i = startPage; i <= endPage; i++) {
+            html += `<button class="pagination-btn ${i === currentPage ? 'active' : ''}" onclick="goToPage(${i})">${i}</button>`;
+        }
+        
+        if (endPage < totalPages) {
+            if (endPage < totalPages - 1) html += `<span style="color:#94a3b8;">...</span>`;
+            html += `<button class="pagination-btn" onclick="goToPage(${totalPages})">${totalPages}</button>`;
+        }
+        
+        // 다음 버튼
+        html += `<button class="pagination-btn" ${currentPage >= totalPages ? 'disabled' : ''} onclick="goToPage(${currentPage + 1})">다음 ▶</button>`;
+        
+        // 페이지 정보
+        html += `<span class="pagination-info">총 ${filteredData.length}개</span>`;
+        
+        pagination.innerHTML = html;
+    }
+
+    function goToPage(page) {
+        currentPage = page;
+        renderTable();
+        renderPagination();
+        
+        // 테이블 상단으로 스크롤
+        document.querySelector('.table-wrap').scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+    </script>
+</body>
+</html>