#app{width:100%;min-height:100vh;min-height:100dvh;background-color:var(--bg-primary);color:var(--text-primary)}:root{--color-brand: #28be91;--color-brand-dark: #149b73;--color-brand-light: #90d6c1;--color-brand-bg: #f2f7f5;--color-accent: #ffe836;--color-accent-dark: #e6d030;--text-primary: #333333;--text-secondary: #666666;--text-tertiary: #999999;--text-disabled: #bbbbbb;--text-inverse: #ffffff;--bg-primary: #ffffff;--bg-secondary: #f4f4f6;--bg-tertiary: #fafafb;--border-color: #e5e5e5;--border-light: #e8e8e8;--divider: #d8d8d8;--color-success: #28be91;--color-error: #b54f4f;--color-error-strong: #b00020;--color-warning: #ffe836;--color-info: #5c9ff7;--card-bg: #ffffff;--card-shadow: rgba(0, 0, 0, .08);--popup-dim: rgba(0, 0, 0, .6);--input-border: #d8d8dd;--input-focus: #28be91;--font-primary: "Noto Sans KR", "Roboto", -apple-system, sans-serif;--font-number: "Roboto", "Noto Sans KR", sans-serif;--font-mono: "Roboto Mono", monospace;--font-size-hero: 28px;--font-size-title: 22px;--font-size-subtitle: 18px;--font-size-body: 16px;--font-size-small: 14px;--font-size-caption: 12px;--font-size-micro: 10px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-pill: 22px;--radius-full: 50%}.dark-mode{--color-brand: #4eb394;--color-brand-dark: #28be91;--color-brand-light: #7ecdb3;--color-brand-bg: #1a2e27;--text-primary: #ededed;--text-secondary: rgba(237, 237, 237, .7);--text-tertiary: rgba(237, 237, 237, .5);--text-disabled: rgba(237, 237, 237, .3);--text-inverse: #222222;--bg-primary: #222222;--bg-secondary: #2c2c2e;--bg-tertiary: #1a1a1a;--border-color: rgba(255, 255, 255, .15);--border-light: rgba(255, 255, 255, .1);--divider: rgba(255, 255, 255, .12);--color-error: #ff6b6b;--color-warning: #ffb340;--card-bg: #2c2c2e;--card-shadow: rgba(0, 0, 0, .3);--popup-dim: rgba(0, 0, 0, .7);--input-border: rgba(255, 255, 255, .2);--input-focus: #4eb394}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-primary);font-size:var(--font-size-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary)}a{color:inherit;text-decoration:none}ul,ol{list-style:none}img{max-width:100%;display:block}button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}input,textarea,select{font:inherit;color:inherit}::-webkit-scrollbar{width:0;height:0}.text-brand{color:var(--color-brand)}.text-error{color:var(--color-error)}.text-secondary{color:var(--text-secondary)}.text-center{text-align:center}.text-right{text-align:right}.font-number{font-family:var(--font-number)}.font-bold{font-weight:var(--font-weight-bold)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-mono{font-family:var(--font-mono)}.hide{display:none!important}.page-customer{width:100%;max-width:600px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}.page-manage{display:grid;grid-template-columns:200px 1fr;min-height:100vh}.page-manage .content-area{padding:var(--spacing-lg);overflow-y:auto}@media(max-width:599px){.page-manage{grid-template-columns:1fr}}@supports (padding: max(0px)){.safe-bottom{padding-bottom:max(16px,env(safe-area-inset-bottom))}}.popup-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;animation:popup-open .2s ease}.popup-wrapper.modal{background-color:var(--popup-dim);display:flex;align-items:center;justify-content:center}.popup-wrapper.modal .popup-content{background-color:var(--bg-primary);border-radius:var(--radius-lg);max-width:90%;max-height:80vh;overflow-y:auto;padding:var(--spacing-lg)}.popup-wrapper.slide-up{background-color:var(--popup-dim)}.popup-wrapper.slide-up .popup-content{position:absolute;bottom:0;left:0;right:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background-color:var(--bg-primary);animation:slide-up .3s ease;max-height:85vh;overflow-y:auto}.popup-wrapper.fullscreen{background-color:var(--bg-primary)}.popup-wrapper.fullscreen .popup-content{width:100%;height:100%;max-width:600px;margin:0 auto;overflow-y:auto}.popup-header{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 var(--spacing-md);border-bottom:1px solid var(--border-light);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-bold)}.popup-header .btn-back,.popup-header .btn-close{font-size:var(--font-size-body);color:var(--text-secondary);padding:var(--spacing-sm)}.popup-body{padding:var(--spacing-md)}@keyframes popup-open{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.icon{display:inline-block;width:24px;height:24px;background-size:contain;background-repeat:no-repeat;background-position:center;vertical-align:middle;flex-shrink:0}.icon-cart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E")}.icon-bell{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E")}.icon-list{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E")}.icon-back{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E")}.icon-close{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}.icon-globe{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E")}.icon-check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328be91' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}.icon-trash{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}.icon-plus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}.icon-minus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}.product-card{transition:transform .1s,box-shadow .15s}.product-card:active{transform:scale(.97);box-shadow:0 1px 3px var(--card-shadow)}.category-tab{transition:all .15s}.category-tab:active{transform:scale(.95)}.person-btn{transition:all .12s}.person-btn:active{transform:scale(.95)}.option-item{transition:all .12s}.option-item:active{transform:scale(.98)}.btn-primary{transition:background-color .15s,transform .1s}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-secondary{transition:all .15s}.btn-secondary:active{transform:scale(.98)}.product-card .product-image-placeholder{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--border-light) 100%);display:flex;align-items:center;justify-content:center}.product-card .product-image-placeholder:after{content:"";width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:.6}.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--border-light) 37%,var(--bg-secondary) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:var(--radius-sm)}.skeleton-card{border-radius:var(--radius-md);overflow:hidden}.skeleton-image{width:100%;aspect-ratio:1}.skeleton-text{height:16px;margin:var(--spacing-sm) var(--spacing-md)}.skeleton-text.short{width:60%}.skeleton-text.price{height:20px;width:40%}@keyframes skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.cart-item-options{font-size:var(--font-size-caption);padding-left:var(--spacing-md);border-left:2px solid var(--color-brand-light);margin-top:var(--spacing-xs);color:var(--text-tertiary)}.btn-primary{background-color:var(--color-brand);color:var(--text-inverse);border:none;border-radius:var(--radius-md);padding:16px 24px;font-size:var(--font-size-body);font-weight:var(--font-weight-bold);width:100%;transition:background-color .15s}.btn-primary:active{background-color:var(--color-brand-dark)}.btn-primary:disabled{opacity:.5;pointer-events:none}.btn-secondary{background-color:transparent;color:var(--color-brand);border:1px solid var(--color-brand);border-radius:var(--radius-md);padding:16px 24px;font-size:var(--font-size-body);width:100%}.btn-accent{background-color:var(--color-accent);color:var(--text-primary);border:none;border-radius:var(--radius-md);padding:16px 24px;font-weight:var(--font-weight-bold);width:100%}.btn-sm{padding:8px 16px;font-size:var(--font-size-small);border-radius:var(--radius-sm);width:auto}.btn-danger{background-color:var(--color-error);color:var(--text-inverse);border:none;border-radius:var(--radius-md);padding:12px 20px;font-size:var(--font-size-small)}.category-tabs{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);overflow-x:auto;-webkit-overflow-scrolling:touch}.category-tab{display:flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:1px solid var(--text-tertiary);border-radius:var(--radius-pill);font-size:var(--font-size-small);color:var(--text-secondary);white-space:nowrap;flex-shrink:0;transition:all .15s}.category-tab.selected{background-color:var(--color-brand);color:var(--text-inverse);border-color:var(--color-brand)}.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);padding:var(--spacing-md)}.product-card{background-color:var(--card-bg);border-radius:var(--radius-md);box-shadow:0 2px 8px var(--card-shadow);overflow:hidden;cursor:pointer}.product-card .product-image{width:100%;aspect-ratio:1;object-fit:cover;background-color:var(--bg-secondary)}.product-card .product-info{padding:12px 12px 4px}.product-card .product-name{font-size:var(--font-size-body);font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--spacing-xs)}.product-card .product-price{font-family:var(--font-number);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-bold);color:var(--text-primary);padding:0 12px 12px}.product-card.sold-out{opacity:.5;pointer-events:none}.product-card.sold-out .product-name:after{content:" (품절)";color:var(--color-error);font-weight:var(--font-weight-regular)}.bottom-bar{position:fixed;bottom:0;left:0;right:0;max-width:600px;margin:0 auto;background-color:var(--bg-primary);border-top:1px solid var(--border-light);padding:var(--spacing-sm) var(--spacing-md);z-index:100}@supports (padding: max(0px)){.bottom-bar{padding-bottom:max(12px,env(safe-area-inset-bottom))}}.bottom-bar .cart-summary{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm);font-size:var(--font-size-small);color:var(--text-secondary)}.bottom-bar .cart-summary .cart-total{font-family:var(--font-number);font-weight:var(--font-weight-bold);color:var(--text-primary);font-size:var(--font-size-body)}.input-field{width:100%;height:48px;border:1px solid var(--input-border);border-radius:var(--radius-sm);font-size:var(--font-size-body);padding:0 var(--spacing-md);color:var(--text-primary);background-color:var(--bg-primary);transition:border-color .2s}.input-field:focus{border-color:var(--input-focus);outline:none}.input-field::placeholder{color:var(--text-disabled)}.qty-control{display:flex;align-items:center;gap:var(--spacing-md)}.qty-control .qty-btn{width:36px;height:36px;border:1px solid var(--border-color);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-subtitle)}.qty-control .qty-value{font-family:var(--font-number);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-bold);min-width:32px;text-align:center}.top-header{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 var(--spacing-md);border-bottom:1px solid var(--border-light);background-color:var(--bg-primary);position:sticky;top:0;z-index:50}.side-nav{width:200px;background-color:var(--bg-secondary);height:100vh;padding:var(--spacing-md) 0;position:sticky;top:0;overflow-y:auto}.side-nav .nav-brand{padding:var(--spacing-md);font-size:var(--font-size-subtitle);font-weight:var(--font-weight-bold);color:var(--color-brand);border-bottom:1px solid var(--border-light);margin-bottom:var(--spacing-sm)}.side-nav .nav-item{display:flex;align-items:center;padding:10px var(--spacing-md);color:var(--text-secondary);font-size:var(--font-size-small);cursor:pointer;transition:all .15s}.side-nav .nav-item:hover{background-color:var(--color-brand-bg);color:var(--color-brand)}.side-nav .nav-item.active{color:var(--color-brand);border-right:4px solid var(--color-brand);font-weight:var(--font-weight-bold)}.data-table{width:100%;border-collapse:collapse}.data-table th{font-size:var(--font-size-caption);font-weight:var(--font-weight-bold);color:var(--text-secondary);border-bottom:1px solid var(--divider);padding:var(--spacing-sm) var(--spacing-md);text-align:left}.data-table td{font-size:var(--font-size-small);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-light)}.data-table tr:nth-child(2n-1) td{background-color:var(--bg-tertiary)}.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.stat-card{background-color:var(--card-bg);border-radius:var(--radius-md);box-shadow:0 2px 8px var(--card-shadow);padding:var(--spacing-md)}.stat-card .stat-label{font-size:var(--font-size-caption);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.stat-card .stat-value{font-family:var(--font-number);font-size:var(--font-size-title);font-weight:var(--font-weight-bold)}.order-board{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}.order-column .column-header{font-size:var(--font-size-body);font-weight:var(--font-weight-bold);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);text-align:center}.order-column.request .column-header{background-color:#fff3e0;color:#e65100}.order-column.cooking .column-header{background-color:#e3f2fd;color:#1565c0}.order-column.done .column-header{background-color:var(--color-brand-bg);color:var(--color-brand-dark)}.order-card{background-color:var(--card-bg);border-radius:var(--radius-sm);box-shadow:0 1px 4px var(--card-shadow);padding:var(--spacing-md);margin-bottom:var(--spacing-sm)}.order-card .order-number{font-family:var(--font-mono);font-weight:var(--font-weight-bold);font-size:var(--font-size-body)}.order-card .order-table{font-size:var(--font-size-caption);color:var(--text-secondary)}.order-card .order-items{font-size:var(--font-size-small);margin:var(--spacing-sm) 0}.order-stepper{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) 0}.order-stepper .step{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-caption);color:var(--text-disabled)}.order-stepper .step.active{color:var(--color-brand);font-weight:var(--font-weight-bold)}.order-stepper .step.done{color:var(--text-secondary)}.order-stepper .step-line{width:24px;height:2px;background-color:var(--border-color)}.order-stepper .step.active~.step-line,.order-stepper .step.done+.step-line{background-color:var(--color-brand)}.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:var(--font-size-caption);font-weight:var(--font-weight-bold)}.badge-request{background-color:#fff3e0;color:#e65100}.badge-accepted{background-color:#e3f2fd;color:#1565c0}.badge-done{background-color:var(--color-brand-bg);color:var(--color-brand-dark)}.badge-completed{background-color:var(--color-brand-bg);color:var(--color-brand)}.badge-cancelled{background-color:#fce4ec;color:var(--color-error)}.badge-pending{background-color:#fff8e1;color:#f57f17}