@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap";:root{--primary-green-800: #0C6B3B;--primary-green-600: #1F7A53;--primary-green-50: #E9F5EE;--neutral-gray-900: #1E1E1E;--neutral-gray-700: #5F6368;--neutral-gray-300: #E5E8EB;--neutral-gray-100: #F5F7F9;--semantic-error: #D32F2F;--semantic-success: #2E7D32;--semantic-info: #247BA0;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--spacing-4xl: 40px;--spacing-5xl: 48px;--shadow-sm: 0 2px 4px rgba(0,0,0,.05);--shadow-md: 0 4px 12px rgba(0,0,0,.08);--shadow-lg: 0 8px 24px rgba(0,0,0,.12);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 20px;--mobile: 360px;--tablet: 768px;--desktop: 1440px;--badge-paid-bg: #E6F4EA;--badge-paid-text: #2E7D32;--badge-unpaid-bg: #FDECEA;--badge-unpaid-text: #D32F2F;--badge-pending-bg: #ECEFF1;--badge-pending-text: #5F6368;--badge-plenty-bg: #C8E6C9;--badge-plenty-text: #0C6B3B;--badge-low-bg: #F5F7F9;--badge-low-text: #5F6368;--badge-out-bg: #FFEBEE;--badge-out-text: #D32F2F}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Noto Sans KR,sans-serif;font-size:14px;line-height:1.5;letter-spacing:.2px;color:var(--neutral-gray-900);background:var(--neutral-gray-100)}h1{font-size:20px;line-height:28px;font-weight:700}h2{font-size:18px;line-height:26px;font-weight:600}h3{font-size:16px;line-height:24px;font-weight:600}.caption{font-size:12px;line-height:18px;font-weight:400}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-xl)}@media (max-width: 360px){.container{padding:0 var(--spacing-lg)}.header .container>div{flex-wrap:nowrap!important;overflow-x:auto}.header .btn{min-width:auto;padding:calc(var(--spacing-sm) * .8) calc(var(--spacing-md) * .8);font-size:11px}.floating-invoice-btn{width:44px!important;height:44px!important;font-size:18px!important;bottom:85px!important;right:12px!important}}@media (max-width: 768px){.header .container>div{flex-wrap:nowrap}.header .container>div>div:last-child{gap:var(--spacing-xs)}.header .btn{padding:calc(var(--spacing-sm) * .9) calc(var(--spacing-lg) * .9);font-size:12.5px}.card{margin-left:0;margin-right:0;padding:var(--spacing-md);word-wrap:break-word;overflow-wrap:break-word;min-width:0}.container{overflow-x:hidden;max-width:100%}.main-content{padding:var(--spacing-lg) 0;overflow-x:hidden}.form-input{width:100%;max-width:100%;box-sizing:border-box;min-width:0}h1,h2,h3,.btn{word-break:keep-all;overflow-wrap:break-word}.tabs{gap:var(--spacing-xs);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tabs::-webkit-scrollbar{display:none}.tab{padding:var(--spacing-sm) var(--spacing-lg);white-space:nowrap;flex-shrink:0}.floating-invoice-btn{bottom:90px;right:16px;width:48px;height:48px;font-size:20px}}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.login-card{background:#fff;border-radius:var(--radius-xl);padding:var(--spacing-5xl);width:90%;max-width:400px;box-shadow:var(--shadow-lg)}.header{background:#fff;padding:var(--spacing-lg) 0;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}.header h2{font-size:19.8px}.header .btn{font-size:13.5px;padding:calc(var(--spacing-md) * .9) calc(var(--spacing-2xl) * .9)}.header h2{white-space:nowrap;overflow:visible}.header .container>div>div:last-child{gap:calc(var(--spacing-md) * .9);flex-shrink:0;white-space:nowrap}.header .btn{white-space:nowrap;flex-shrink:0}.main-content{padding:var(--spacing-2xl) 0;min-height:calc(100vh - 140px);padding-bottom:100px}.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;padding:var(--spacing-lg);box-shadow:0 -2px 8px #0000001a;z-index:99}.floating-invoice-btn{position:fixed;bottom:100px;right:20px;width:56px;height:56px;border-radius:50%;background:var(--primary-green-600);color:#fff;border:none;font-size:24px;cursor:pointer;box-shadow:var(--shadow-lg);z-index:98;display:flex;align-items:center;justify-content:center;transition:all .3s ease;will-change:transform;backface-visibility:hidden}.floating-invoice-btn:hover{transform:scale(1.05);background:var(--primary-green-800);box-shadow:0 8px 25px #0c6b3b4d}.bottom-bar-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.sidebar{position:fixed;left:0;top:0;width:240px;height:100vh;background:#fff;box-shadow:var(--shadow-md);transition:transform .3s cubic-bezier(.25,.46,.45,.94);z-index:200;display:flex;flex-direction:column;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.sidebar-toggle{display:none}@media (max-width: 768px){.sidebar{transform:translate3d(-100%,0,0);width:280px}.sidebar.active{transform:translateZ(0)}.admin-content{margin-left:0;padding:var(--spacing-xs) var(--spacing-xs);padding-top:130px;padding-right:120px;padding-bottom:var(--spacing-md)}.sidebar-toggle{display:block;position:fixed!important;top:var(--spacing-md)!important;right:var(--spacing-md)!important;z-index:1001!important;background:var(--primary-green-800)!important;color:#fff!important;padding:0!important;border-radius:var(--radius-sm)!important;cursor:pointer!important;font-size:18px;border:none;box-shadow:var(--shadow-md);width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px}.sidebar-toggle:hover{background:var(--primary-green-700)!important;transform:scale(1.05)}.sidebar-toggle span{display:block;width:20px;height:2px;background:#fff;border-radius:1px;transition:all .3s ease}.sidebar-toggle span:nth-child(1){transform-origin:left center}.sidebar-toggle span:nth-child(2){opacity:1}.sidebar-toggle span:nth-child(3){transform-origin:left center}.sidebar.active+.overlay+.admin-content .sidebar-toggle span:nth-child(1),.sidebar.active~.sidebar-toggle span:nth-child(1){transform:rotate(45deg)}.sidebar.active+.overlay+.admin-content .sidebar-toggle span:nth-child(2),.sidebar.active~.sidebar-toggle span:nth-child(2){opacity:0}.sidebar.active+.overlay+.admin-content .sidebar-toggle span:nth-child(3),.sidebar.active~.sidebar-toggle span:nth-child(3){transform:rotate(-45deg)}.card{margin-bottom:var(--spacing-lg)}.table{font-size:12px}.table th,.table td{padding:var(--spacing-xs) var(--spacing-sm);white-space:nowrap}.form-input{font-size:16px}.btn{padding:var(--spacing-sm) var(--spacing-md);font-size:14px}.stats-cards,[style*=grid-template-columns]{display:block!important}[style*=grid-template-columns]>*{margin-bottom:var(--spacing-md)}h1{font-size:18px;margin-bottom:var(--spacing-md)!important}h2{font-size:16px}}.sidebar-header{padding:var(--spacing-2xl);border-bottom:1px solid var(--neutral-gray-300)}.sidebar-nav{padding:var(--spacing-lg) 0}.sidebar-item{display:block;padding:var(--spacing-md) var(--spacing-2xl);color:var(--neutral-gray-700);text-decoration:none;transition:all .3s}.sidebar-item:hover,.sidebar-item.active{background:var(--primary-green-50);color:var(--primary-green-800)}.sidebar-item.logout-item{border-top:1px solid var(--neutral-gray-300);margin-top:var(--spacing-md);color:var(--semantic-error)}.sidebar-item.logout-item:hover{background:var(--semantic-error-bg);color:var(--semantic-error)}.admin-content{margin-left:240px;padding:var(--spacing-4xl) var(--spacing-md);padding-bottom:var(--spacing-2xl)}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:199;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;will-change:opacity;backface-visibility:hidden}.overlay.active{opacity:1;visibility:visible}@media (max-width: 768px){.overlay.active{display:block}}.section{display:none}.section.active{display:block}.btn{padding:var(--spacing-md) var(--spacing-2xl);border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.btn-primary{background:var(--primary-green-800);color:#fff}.btn-primary:hover{background:var(--primary-green-600)}.btn-secondary{background:#fff;color:var(--primary-green-800);border:2px solid var(--primary-green-800)}.btn-ghost{background:#fff;color:var(--neutral-gray-700);border:1px solid var(--neutral-gray-300);padding:var(--spacing-sm) var(--spacing-lg)}.btn-ghost:hover{background:var(--neutral-gray-100);border-color:var(--neutral-gray-700)}.btn:disabled{opacity:.5;cursor:not-allowed}.badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);border-radius:20px;font-size:12px;font-weight:600}.badge-paid{background:var(--badge-paid-bg);color:var(--badge-paid-text)}.badge-unpaid{background:var(--badge-unpaid-bg);color:var(--badge-unpaid-text)}.badge-pending{background:var(--badge-pending-bg);color:var(--badge-pending-text)}.badge-out{background:var(--badge-out-bg);color:var(--badge-out-text)}.badge-plenty{background:var(--badge-plenty-bg);color:var(--badge-plenty-text)}.badge-low,.badge-low-stock{background:var(--badge-low-bg);color:var(--badge-low-text);border:1px solid var(--neutral-gray-300)}.badge-out-of-stock{background:var(--badge-out-bg);color:var(--badge-out-text)}.badge-price-pending{background:var(--badge-pending-bg);color:var(--badge-pending-text)}.badge-completed{background:#e8f5e8;color:#2e7d32}.badge-processed{background:#f3e5f5;color:#7b1fa2}.badge-detail{background:#e3f2fd;color:#1565c0;cursor:pointer;transition:all .2s;border:1px solid #BBDEFB}.badge-detail:hover{background:#bbdefb;color:#0d47a1;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.card{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-lg)}.form-group{margin-bottom:var(--spacing-xl)}.form-label{display:block;margin-bottom:var(--spacing-sm);font-weight:600;color:var(--neutral-gray-700)}.form-input{width:100%;padding:var(--spacing-md);border:2px solid var(--neutral-gray-300);border-radius:var(--radius-md);font-size:15px;transition:all .3s}.form-input:focus{outline:none;border-color:var(--primary-green-600);box-shadow:0 0 0 3px #0c6b3b1a}.tabs{display:flex;gap:var(--spacing-sm);border-bottom:2px solid var(--neutral-gray-300);margin-bottom:var(--spacing-2xl)}.tab{padding:var(--spacing-md) var(--spacing-2xl);background:transparent;border:none;color:var(--neutral-gray-700);font-weight:600;cursor:pointer;transition:all .3s;border-bottom:3px solid transparent;margin-bottom:-2px}.tab.active{color:var(--primary-green-800);border-bottom-color:var(--primary-green-800)}.tab.disabled{color:var(--neutral-gray-300);cursor:not-allowed;opacity:.5}.tab.disabled:hover{color:var(--neutral-gray-300);border-bottom-color:transparent}.table{width:100%;border-collapse:collapse}.table th{background:var(--neutral-gray-100);padding:var(--spacing-md);text-align:left;font-weight:600;color:var(--neutral-gray-700);border-bottom:2px solid var(--neutral-gray-300)}.table td{padding:var(--spacing-md);border-bottom:1px solid var(--neutral-gray-300)}.table tr:hover{background:#0c6b3b0d}.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000}.modal.active{display:flex;align-items:center;justify-content:center}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center}.modal-content{background:#fff;border-radius:var(--radius-xl);padding:var(--spacing-3xl);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 25px #0000001a}.modal-header{margin-bottom:var(--spacing-2xl)}.modal-footer{margin-top:var(--spacing-2xl);display:flex;gap:var(--spacing-md);justify-content:flex-end}.qty-controls{display:flex;align-items:center;gap:var(--spacing-md);background:var(--neutral-gray-100);padding:var(--spacing-sm);border-radius:var(--radius-md)}.qty-btn{width:36px;height:36px;border:none;background:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:18px;font-weight:600;color:var(--primary-green-800);transition:all .3s}.qty-btn:hover{background:var(--primary-green-800);color:#fff}.qty-display{min-width:60px;text-align:center;font-weight:600;font-size:16px}.toggle-container{display:flex;align-items:center;gap:var(--spacing-md)}.toggle-switch{position:relative;width:48px;height:24px}.toggle-input{display:none}.toggle-slider{position:absolute;cursor:pointer;background:var(--neutral-gray-300);border-radius:24px;top:0;right:0;bottom:0;left:0;transition:.3s}.toggle-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}.toggle-input:checked+.toggle-slider{background:var(--primary-green-800)}.toggle-input:checked+.toggle-slider:before{transform:translate(24px)}.pagination{display:flex;gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-2xl)}.pagination button{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--neutral-gray-300);background:#fff;border-radius:var(--radius-sm);cursor:pointer}.pagination button.active{background:var(--primary-green-800);color:#fff;border-color:var(--primary-green-800)}.invoice-detail-panel{position:fixed;right:-500px;top:0;width:500px;height:100vh;background:#fff;box-shadow:var(--shadow-lg);transition:right .3s ease;z-index:1000;overflow-y:auto}.invoice-detail-panel.active{right:0}.invoice-detail-content{padding:var(--spacing-2xl)}.invoice-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--neutral-gray-300)}.invoice-detail-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999}.invoice-detail-overlay.active{display:block}.customers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-xl)}.customer-card{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--neutral-gray-300);transition:all .3s}.customer-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-green-600)}.customer-code{background:var(--primary-green-50);color:var(--primary-green-800);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);font-weight:600;font-size:12px}.stat-card{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-2xl);box-shadow:var(--shadow-md);border:1px solid var(--neutral-gray-300);transition:all .3s;text-align:center}.stat-card:hover{box-shadow:var(--shadow-lg);border-color:var(--primary-green-600)}.stat-title{font-size:14px;color:var(--neutral-gray-700);margin-bottom:var(--spacing-sm);font-weight:500}.stat-value{font-size:32px;font-weight:700;color:var(--primary-green-800);margin-bottom:var(--spacing-xs);line-height:1.2}.stat-subtitle{font-size:12px;color:var(--neutral-gray-700);font-weight:400}@media (max-width: 768px){.sidebar{transform:translate(-100%)}.sidebar.active{transform:translate(0)}.admin-content{margin-left:0}.menu-toggle{display:block;position:fixed;top:var(--spacing-lg);left:var(--spacing-lg);z-index:201;background:var(--primary-green-800);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:20px}.header-content{flex-direction:column;gap:var(--spacing-md)}.header-nav{width:100%;display:flex;gap:var(--spacing-sm)}.nav-item{flex:1;text-align:center;padding:var(--spacing-sm);font-size:13px}.bottom-bar-content{gap:var(--spacing-md)}.total-display{flex:1;font-size:18px}.btn-order{width:100px;padding:var(--spacing-sm) var(--spacing-md)}.dashboard-grid{grid-template-columns:1fr}.table-container{overflow-x:auto}.modal-content{width:95%;padding:var(--spacing-2xl)}.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.tab{white-space:nowrap}.customers-grid-container{display:flex;flex-direction:column;gap:var(--spacing-lg);margin:0}.customers-grid{display:flex;flex-direction:column;gap:var(--spacing-lg)}.customer-card{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--neutral-gray-300);box-shadow:0 2px 4px #0000000d}.customer-card h3{font-size:16px;margin-bottom:var(--spacing-xs)}.customer-code{background:var(--primary-green-50);color:var(--primary-green-800);padding:2px 6px;border-radius:var(--radius-sm);font-size:11px;font-weight:600}.products-grid{display:flex;flex-direction:column;gap:var(--spacing-lg)}.product-card{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--neutral-gray-300);box-shadow:0 2px 4px #0000000d}.product-card h3{font-size:16px;margin-bottom:var(--spacing-xs)}.product-category{background:var(--neutral-gray-100);color:var(--neutral-gray-700);padding:2px 6px;border-radius:var(--radius-sm);font-size:11px}.btn-group-mobile{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.btn-group-mobile .btn{flex:1;font-size:13px;padding:var(--spacing-sm);min-height:44px}.form-group{margin-bottom:var(--spacing-md)}.form-group .caption{font-size:11px;font-weight:600;color:var(--neutral-gray-700);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.5px}.admin-actions{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.admin-actions .btn{width:100%;min-height:48px;font-size:16px}.admin-page-header{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding-top:60px}.admin-page-header h1{font-size:24px;margin:0}.desktop-table{display:none}.mobile-cards{display:block}}@media (min-width: 768px){.menu-toggle{display:none}.container{max-width:1200px}.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.admin-page-header{padding-top:0;flex-direction:row;justify-content:space-between;align-items:center}.admin-actions{flex-direction:row;gap:var(--spacing-md);width:auto;margin-bottom:0}.admin-actions .btn{width:auto;min-height:40px;font-size:14px;padding:var(--spacing-sm) var(--spacing-lg)}.desktop-table{display:block}.mobile-cards{display:none}.customers-grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--spacing-xl);margin:0}.btn-group-mobile{flex-direction:row;gap:var(--spacing-xs)}.btn-group-mobile .btn{width:auto;min-height:auto;font-size:12px;padding:var(--spacing-xs) var(--spacing-sm)}}@media (pointer: coarse){button,.btn,.qty-btn,.tab,.nav-item{min-height:44px;min-width:44px}}