diff --git a/resources/views/barobill/ecard/index.blade.php b/resources/views/barobill/ecard/index.blade.php
index 1551081f..c5d01b50 100644
--- a/resources/views/barobill/ecard/index.blade.php
+++ b/resources/views/barobill/ecard/index.blade.php
@@ -3,16 +3,6 @@
 @section('title', '카드 사용내역')
 
 @section('content')
-<!-- 현재 테넌트 정보 카드 (React 외부) -->
-<x-barobill-tenant-header
-    :currentTenant="$currentTenant"
-    :barobillMember="$barobillMember"
-    :isTestMode="$isTestMode"
-    gradientFrom="#7c3aed"
-    gradientTo="#8b5cf6"
-    :icon="'<svg class=&quot;w-7 h-7&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; viewBox=&quot;0 0 24 24&quot;><path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z&quot; /></svg>'"
-/>
-
 <div id="ecard-root"></div>
 @endsection
 
@@ -80,57 +70,22 @@
         }
     };
 
-    // StatCard Component
-    const StatCard = ({ title, value, subtext, icon, color = 'purple' }) => {
+    // CompactStat Component (계좌입출금 스타일 통계 배지)
+    const CompactStat = ({ label, value, color = 'stone' }) => {
         const colorClasses = {
-            purple: 'bg-purple-50 text-purple-600',
-            green: 'bg-green-50 text-green-600',
-            red: 'bg-red-50 text-red-600',
-            stone: 'bg-stone-50 text-stone-600'
+            purple: 'text-purple-600',
+            green: 'text-green-600',
+            red: 'text-red-600',
+            stone: 'text-stone-700'
         };
         return (
-            <div className="bg-white rounded-xl p-6 shadow-sm border border-stone-100 hover:shadow-md transition-shadow">
-                <div className="flex items-start justify-between mb-4">
-                    <h3 className="text-sm font-medium text-stone-500">{title}</h3>
-                    <div className={`p-2 rounded-lg ${colorClasses[color] || colorClasses.purple}`}>
-                        {icon}
-                    </div>
-                </div>
-                <div className="text-2xl font-bold text-stone-900 mb-1">{value}</div>
-                {subtext && <div className="text-xs text-stone-400">{subtext}</div>}
+            <div className="flex items-center gap-3 px-6 py-4 bg-white rounded-xl border border-gray-200 shadow-sm">
+                <span className="text-base text-stone-500 font-medium">{label}</span>
+                <span className={`text-xl font-bold ${colorClasses[color]}`}>{value}</span>
             </div>
         );
     };
 
-    // CardSelector Component
-    const CardSelector = ({ cards, selectedCard, onSelect }) => (
-        <div className="flex flex-wrap gap-2">
-            <button
-                onClick={() => onSelect('')}
-                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                    selectedCard === ''
-                        ? 'bg-purple-600 text-white'
-                        : 'bg-white border border-stone-200 text-stone-700 hover:bg-stone-50'
-                }`}
-            >
-                전체 카드
-            </button>
-            {cards.map(card => (
-                <button
-                    key={card.cardNum}
-                    onClick={() => onSelect(card.cardNum)}
-                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                        selectedCard === card.cardNum
-                            ? 'bg-purple-600 text-white'
-                            : 'bg-white border border-stone-200 text-stone-700 hover:bg-stone-50'
-                    }`}
-                >
-                    {card.cardBrand} {card.cardNum ? '****' + card.cardNum.slice(-4) : ''}
-                </button>
-            ))}
-        </div>
-    );
-
     // AccountCodeSelect Component (검색 가능한 드롭다운)
     const AccountCodeSelect = ({ value, onChange, accountCodes }) => {
         const [isOpen, setIsOpen] = useState(false);
@@ -1010,32 +965,18 @@ className="flex-1 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 t
     const TransactionTable = ({
         logs,
         loading,
-        dateFrom,
-        dateTo,
-        onDateFromChange,
-        onDateToChange,
-        onThisMonth,
-        onLastMonth,
-        onMonthOffset,
-        onSearch,
         totalCount,
         accountCodes,
         onAccountCodeChange,
         onFieldChange,
-        onSave,
-        onExport,
-        saving,
-        hasChanges,
         splits,
         onOpenSplitModal,
         onDeleteSplits,
-        onManualNew,
         onManualEdit,
         onManualDelete,
         onHide,
         showHidden,
         hiddenLogs,
-        onToggleHidden,
         onRestore,
         loadingHidden,
     }) => {
@@ -1050,143 +991,7 @@ className="flex-1 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 t
         }
 
         return (
-            <div className="bg-white rounded-xl shadow-sm border border-stone-100 overflow-hidden min-h-[calc(100vh-200px)]">
-                <div className="p-6 border-b border-stone-100">
-                    <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-                        <h2 className="text-lg font-bold text-stone-900">카드 사용내역</h2>
-                        {/* 기간 조회 필터 */}
-                        <div className="flex flex-wrap items-center gap-3">
-                            <div className="flex items-center gap-2">
-                                <label className="text-sm text-stone-500">기간</label>
-                                <input
-                                    type="date"
-                                    value={dateFrom}
-                                    onChange={(e) => onDateFromChange(e.target.value)}
-                                    className="rounded-lg border border-stone-200 px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 outline-none"
-                                />
-                                <span className="text-stone-400">~</span>
-                                <input
-                                    type="date"
-                                    value={dateTo}
-                                    onChange={(e) => onDateToChange(e.target.value)}
-                                    className="rounded-lg border border-stone-200 px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 outline-none"
-                                />
-                            </div>
-                            <div className="flex items-center gap-2">
-                                <button
-                                    onClick={onThisMonth}
-                                    className="px-3 py-1.5 text-sm bg-purple-50 text-purple-600 rounded-lg hover:bg-purple-100 transition-colors font-medium"
-                                >
-                                    이번 달
-                                </button>
-                                <button
-                                    onClick={onLastMonth}
-                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
-                                >
-                                    지난달
-                                </button>
-                                <button
-                                    onClick={() => onMonthOffset(-2)}
-                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
-                                >
-                                    D-2월
-                                </button>
-                                <button
-                                    onClick={() => onMonthOffset(-3)}
-                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
-                                >
-                                    D-3월
-                                </button>
-                                <button
-                                    onClick={() => onMonthOffset(-4)}
-                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
-                                >
-                                    D-4월
-                                </button>
-                                <button
-                                    onClick={() => onMonthOffset(-5)}
-                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
-                                >
-                                    D-5월
-                                </button>
-                                <button
-                                    onClick={onSearch}
-                                    className="px-4 py-1.5 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium flex items-center gap-2"
-                                >
-                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                    </svg>
-                                    조회
-                                </button>
-                            </div>
-                            <span className="text-sm text-stone-500 ml-2">
-                                조회: <span className="font-semibold text-stone-700">{logs.length}</span>건
-                                {totalCount !== logs.length && (
-                                    <span className="text-stone-400"> / 전체 {totalCount}건</span>
-                                )}
-                            </span>
-                        </div>
-                    </div>
-                    {/* 저장/수동입력/엑셀 버튼 */}
-                    <div className="flex items-center gap-2 mt-4">
-                        <button
-                            onClick={onSave}
-                            disabled={saving || logs.length === 0}
-                            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                                hasChanges
-                                    ? 'bg-purple-600 text-white hover:bg-purple-700'
-                                    : 'bg-purple-100 text-purple-700 hover:bg-purple-200'
-                            } disabled:opacity-50 disabled:cursor-not-allowed`}
-                        >
-                            {saving ? (
-                                <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
-                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-                                </svg>
-                            ) : (
-                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-                                </svg>
-                            )}
-                            {hasChanges ? '변경사항 저장' : '저장'}
-                        </button>
-                        <button
-                            onClick={onManualNew}
-                            className="flex items-center gap-2 px-4 py-2 bg-green-100 text-green-700 rounded-lg text-sm font-medium hover:bg-green-200 transition-colors"
-                        >
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
-                            </svg>
-                            수동입력
-                        </button>
-                        <button
-                            onClick={onExport}
-                            disabled={logs.length === 0}
-                            className="flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg text-sm font-medium hover:bg-blue-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                        >
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                            </svg>
-                            엑셀 다운로드
-                        </button>
-                        <button
-                            onClick={onToggleHidden}
-                            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
-                                showHidden
-                                    ? 'bg-red-600 text-white hover:bg-red-700'
-                                    : 'bg-red-100 text-red-700 hover:bg-red-200'
-                            }`}
-                        >
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
-                            </svg>
-                            {showHidden ? '삭제데이터 닫기' : '삭제데이터 보기'}
-                            {showHidden && hiddenLogs.length > 0 && (
-                                <span className="bg-white text-red-600 text-xs px-1.5 py-0.5 rounded-full font-bold">{hiddenLogs.length}</span>
-                            )}
-                        </button>
-                    </div>
-                </div>
+            <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden min-h-[calc(100vh-200px)]">
                 <div className="overflow-x-auto" style={ {minHeight: '500px', overflowY: 'auto'} }>
                     <table className="w-full text-left text-sm text-stone-600">
                         <thead className="bg-stone-50 text-xs uppercase font-medium text-stone-500 sticky top-0">
@@ -2195,12 +2000,19 @@ className="px-3 py-1 bg-green-500 text-white text-xs rounded-lg hover:bg-green-6
         const formatCurrency = (val) => new Intl.NumberFormat('ko-KR').format(val || 0) + '원';
 
         return (
-            <div className="space-y-8">
-                {/* Page Header */}
+            <div className="space-y-6">
+                {/* Page Header - 계좌입출금 스타일 */}
                 <div className="flex items-center justify-between">
-                    <div>
-                        <h1 className="text-2xl font-bold text-stone-900">카드 사용내역</h1>
-                        <p className="text-stone-500 mt-1">바로빌 API를 통한 카드 사용내역 조회 및 계정과목 관리</p>
+                    <div className="flex items-center gap-4">
+                        <div className="p-2.5 bg-purple-100 rounded-xl">
+                            <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+                            </svg>
+                        </div>
+                        <div>
+                            <h1 className="text-2xl font-bold text-stone-900">카드 사용내역</h1>
+                            <p className="text-stone-500 mt-1">바로빌 API를 통한 카드 사용내역 조회 및 계정과목 관리</p>
+                        </div>
                     </div>
                     <div className="flex items-center gap-2">
                         @if($isTestMode)
@@ -2221,62 +2033,175 @@ className="px-3 py-1 bg-green-500 text-white text-xs rounded-lg hover:bg-green-6
                     </div>
                 </div>
 
-                {/* Dashboard */}
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                    <StatCard
-                        title="총 사용금액"
-                        value={formatCurrency(summary.totalAmount)}
-                        subtext={`승인 ${(summary.approvalCount || 0).toLocaleString()}건 / 취소 ${(summary.cancelCount || 0).toLocaleString()}건`}
-                        icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>}
-                        color="purple"
-                    />
-                    <div className="bg-white rounded-xl p-6 shadow-sm border border-stone-100 hover:shadow-md transition-shadow">
-                        <div className="flex items-start justify-between mb-3">
-                            <h3 className="text-sm font-medium text-stone-500">공제</h3>
-                            <div className="p-2 rounded-lg bg-green-50 text-green-600">
-                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/></svg>
-                            </div>
-                        </div>
-                        <div className="text-2xl font-bold text-stone-900 mb-2">{formatCurrency(summary.deductibleAmount)}</div>
-                        <div className="space-y-1 pt-2 border-t border-stone-100">
-                            <div className="flex justify-between text-xs">
-                                <span className="text-stone-400">공급가액</span>
-                                <span className="font-medium text-stone-600">{formatCurrency(summary.deductibleSupply)}</span>
-                            </div>
-                            <div className="flex justify-between text-xs">
-                                <span className="text-stone-400">세액</span>
-                                <span className="font-medium text-stone-600">{formatCurrency(summary.deductibleTax)}</span>
-                            </div>
-                        </div>
-                        <div className="text-xs text-stone-400 mt-2">{(summary.deductibleCount || 0).toLocaleString()}건</div>
+                {/* 통계 + 카드 선택 (한 줄) - 계좌입출금 스타일 */}
+                <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+                    <div className="flex flex-wrap items-center gap-3">
+                        <CompactStat label="사용액" value={formatCurrency(summary.totalAmount)} color="purple" />
+                        <CompactStat label="공제" value={formatCurrency(summary.deductibleAmount)} color="green" />
+                        <CompactStat label="불공제" value={formatCurrency(summary.nonDeductibleAmount)} color="red" />
+                        <CompactStat label="카드" value={`${cards.length}개`} color="stone" />
+                        <CompactStat label="거래" value={`${(summary.count || logs.length).toLocaleString()}건`} color="stone" />
+
+                        {/* 구분선 */}
+                        {cards.length > 0 && <div className="w-px h-6 bg-stone-200 mx-1"></div>}
+
+                        {/* 카드 선택 드롭다운 */}
+                        {cards.length > 0 && (
+                            <>
+                                <span className="text-xs text-stone-500">카드:</span>
+                                <select
+                                    value={selectedCard}
+                                    onChange={(e) => setSelectedCard(e.target.value)}
+                                    className="px-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-stone-700 focus:ring-2 focus:ring-purple-500 outline-none"
+                                >
+                                    <option value="">전체 카드</option>
+                                    {cards.map(card => (
+                                        <option key={card.cardNum} value={card.cardNum}>
+                                            {card.cardBrand} ****{card.cardNum ? card.cardNum.slice(-4) : ''}
+                                        </option>
+                                    ))}
+                                </select>
+                            </>
+                        )}
                     </div>
-                    <StatCard
-                        title="불공제"
-                        value={formatCurrency(summary.nonDeductibleAmount)}
-                        subtext={`${(summary.nonDeductibleCount || 0).toLocaleString()}건`}
-                        icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>}
-                        color="red"
-                    />
-                    <StatCard
-                        title="등록된 카드"
-                        value={`${cards.length}개`}
-                        subtext="사용 가능한 카드"
-                        icon={<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>}
-                        color="stone"
-                    />
                 </div>
 
-                {/* Card Filter */}
-                {cards.length > 0 && (
-                    <div className="bg-white rounded-xl shadow-sm border border-stone-100 p-6">
-                        <h2 className="text-sm font-medium text-stone-700 mb-3">카드 선택</h2>
-                        <CardSelector
-                            cards={cards}
-                            selectedCard={selectedCard}
-                            onSelect={setSelectedCard}
-                        />
+                {/* 필터 영역 - 날짜/조회/액션 버튼 통합 */}
+                <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+                    <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+                        {/* 기간 조회 필터 */}
+                        <div className="flex flex-wrap items-center gap-3">
+                            <div className="flex items-center gap-2">
+                                <label className="text-sm text-stone-500">기간</label>
+                                <input
+                                    type="date"
+                                    value={dateFrom}
+                                    onChange={(e) => setDateFrom(e.target.value)}
+                                    className="rounded-lg border border-gray-200 px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 outline-none"
+                                />
+                                <span className="text-stone-400">~</span>
+                                <input
+                                    type="date"
+                                    value={dateTo}
+                                    onChange={(e) => setDateTo(e.target.value)}
+                                    className="rounded-lg border border-gray-200 px-3 py-1.5 text-sm focus:ring-2 focus:ring-purple-500 outline-none"
+                                />
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <button
+                                    onClick={handleThisMonth}
+                                    className="px-3 py-1.5 text-sm bg-purple-50 text-purple-600 rounded-lg hover:bg-purple-100 transition-colors font-medium"
+                                >
+                                    이번 달
+                                </button>
+                                <button
+                                    onClick={handleLastMonth}
+                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
+                                >
+                                    지난달
+                                </button>
+                                <button
+                                    onClick={() => handleMonthOffset(-2)}
+                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
+                                >
+                                    D-2월
+                                </button>
+                                <button
+                                    onClick={() => handleMonthOffset(-3)}
+                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
+                                >
+                                    D-3월
+                                </button>
+                                <button
+                                    onClick={() => handleMonthOffset(-4)}
+                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
+                                >
+                                    D-4월
+                                </button>
+                                <button
+                                    onClick={() => handleMonthOffset(-5)}
+                                    className="px-3 py-1.5 text-sm bg-stone-100 text-stone-600 rounded-lg hover:bg-stone-200 transition-colors font-medium"
+                                >
+                                    D-5월
+                                </button>
+                                <button
+                                    onClick={() => loadTransactions()}
+                                    className="px-4 py-1.5 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium flex items-center gap-2"
+                                >
+                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                                    </svg>
+                                    조회
+                                </button>
+                            </div>
+                            <span className="text-sm text-stone-500 ml-2">
+                                조회: <span className="font-semibold text-stone-700">{logs.length}</span>건
+                                {(summary.count || logs.length) !== logs.length && (
+                                    <span className="text-stone-400"> / 전체 {summary.count}건</span>
+                                )}
+                            </span>
+                        </div>
+                        {/* 액션 버튼들 */}
+                        <div className="flex items-center gap-2">
+                            <button
+                                onClick={handleSave}
+                                disabled={saving || logs.length === 0}
+                                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                                    hasChanges
+                                        ? 'bg-purple-600 text-white hover:bg-purple-700'
+                                        : 'bg-purple-100 text-purple-700 hover:bg-purple-200'
+                                } disabled:opacity-50 disabled:cursor-not-allowed`}
+                            >
+                                {saving ? (
+                                    <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
+                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                                    </svg>
+                                ) : (
+                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
+                                    </svg>
+                                )}
+                                {hasChanges ? '변경사항 저장' : '저장'}
+                            </button>
+                            <button
+                                onClick={handleManualNew}
+                                className="flex items-center gap-2 px-4 py-2 bg-green-100 text-green-700 rounded-lg text-sm font-medium hover:bg-green-200 transition-colors"
+                            >
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4v16m8-8H4" />
+                                </svg>
+                                수동입력
+                            </button>
+                            <button
+                                onClick={handleExport}
+                                disabled={logs.length === 0}
+                                className="flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-700 rounded-lg text-sm font-medium hover:bg-blue-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                </svg>
+                                엑셀
+                            </button>
+                            <button
+                                onClick={handleToggleHidden}
+                                className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+                                    showHidden
+                                        ? 'bg-red-600 text-white hover:bg-red-700'
+                                        : 'bg-red-100 text-red-700 hover:bg-red-200'
+                                }`}
+                            >
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
+                                </svg>
+                                {showHidden ? '삭제데이터 닫기' : '삭제데이터'}
+                                {showHidden && hiddenLogs.length > 0 && (
+                                    <span className="bg-white text-red-600 text-xs px-1.5 py-0.5 rounded-full font-bold">{hiddenLogs.length}</span>
+                                )}
+                            </button>
+                        </div>
                     </div>
-                )}
+                </div>
 
                 {/* Error Display */}
                 {error && (
@@ -2306,32 +2231,18 @@ className="px-3 py-1 bg-green-500 text-white text-xs rounded-lg hover:bg-green-6
                     <TransactionTable
                         logs={logs}
                         loading={loading}
-                        dateFrom={dateFrom}
-                        dateTo={dateTo}
-                        onDateFromChange={setDateFrom}
-                        onDateToChange={setDateTo}
-                        onThisMonth={handleThisMonth}
-                        onLastMonth={handleLastMonth}
-                        onMonthOffset={handleMonthOffset}
-                        onSearch={() => loadTransactions()}
                         totalCount={summary.count || logs.length}
                         accountCodes={accountCodes}
                         onAccountCodeChange={handleAccountCodeChange}
                         onFieldChange={handleFieldChange}
-                        onSave={handleSave}
-                        onExport={handleExport}
-                        saving={saving}
-                        hasChanges={hasChanges}
                         splits={splits}
                         onOpenSplitModal={handleOpenSplitModal}
                         onDeleteSplits={handleDeleteSplits}
-                        onManualNew={handleManualNew}
                         onManualEdit={handleManualEdit}
                         onManualDelete={handleManualDelete}
                         onHide={handleHide}
                         showHidden={showHidden}
                         hiddenLogs={hiddenLogs}
-                        onToggleHidden={handleToggleHidden}
                         onRestore={handleRestore}
                         loadingHidden={loadingHidden}
                     />