/* ============================================================
Quick-add FAB + bottom sheet — shared across /sample/*.html
============================================================ */

/* FAB */
.fab {
position: fixed; right: var(--space-5); bottom: var(--space-5);
width: 64px; height: 64px; border-radius: var(--radius-full);
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
color: #fff; border: none; cursor: pointer;
box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.25);
font-size: 28px; font-weight: var(--font-weight-bold);
display: grid; place-items: center;
z-index: 50;
transition: transform var(--duration-base), box-shadow var(--duration-base);
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(201,123,90,0.40); }
.fab:active { transform: translateY(0); }
.fab .plus { line-height: 1; margin-top: -2px; }

/* Backdrop */
.qa-backdrop {
position: fixed; inset: 0; background: var(--color-overlay);
opacity: 0; pointer-events: none;
transition: opacity var(--duration-base);
z-index: 60;
}
.qa-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Bottom sheet */
.qa-sheet {
position: fixed; left: 0; right: 0; bottom: 0;
background: var(--color-card-bg);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: 0 -12px 40px rgba(0,0,0,0.18);
transform: translateY(100%);
transition: transform var(--duration-base);
z-index: 70;
display: flex; flex-direction: column;
max-height: 88vh;
}
.qa-sheet.is-open { transform: translateY(0); }
@media (min-width: 769px) {
.qa-sheet {
left: 50%; right: auto; bottom: 24px; transform: translate(-50%, calc(100% + 24px));
width: 540px; border-radius: var(--radius-lg);
}
.qa-sheet.is-open { transform: translate(-50%, 0); }
}

.qa-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.qa-head .qa-title {
font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);
font-family: 'Gowun Batang', var(--font-family); letter-spacing: -0.01em;
margin: 0;
}
.qa-close {
width: 36px; height: 36px; border-radius: var(--radius-full);
border: 1px solid var(--color-border); background: var(--color-card-bg);
cursor: pointer; font-size: 14px; color: var(--color-text-secondary);
}
.qa-close:hover { background: var(--color-bg); }

/* Tabs */
.qa-tabs {
display: flex; gap: 2px; padding: var(--space-3) var(--space-5) 0;
background: var(--color-card-bg);
}
.qa-tab {
flex: 1; padding: var(--space-3) var(--space-2);
background: transparent; border: none; cursor: pointer;
font-family: var(--font-family); font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold); color: var(--color-text-muted);
border-bottom: 2px solid transparent;
transition: color var(--duration-fast), border-color var(--duration-fast);
}
.qa-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.qa-tab:hover { color: var(--color-text-primary); }

.qa-body {
padding: var(--space-4) var(--space-5);
overflow-y: auto;
flex: 1;
display: flex; flex-direction: column; gap: var(--space-4);
}
.qa-pane { display: none; flex-direction: column; gap: var(--space-4); }
.qa-pane.is-active { display: flex; }

.qa-field-label {
font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
text-transform: uppercase; letter-spacing: 0.04em;
margin-bottom: var(--space-1);
}

.qa-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qa-chip {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border); border-radius: var(--radius-full);
background: var(--color-card-bg); font-size: var(--font-size-sm);
color: var(--color-text-secondary); cursor: pointer; font-family: var(--font-family);
transition: all var(--duration-fast);
}
.qa-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.qa-chip.is-active {
background: var(--color-primary); color: #fff; border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
}

.qa-input, .qa-num-input {
font-family: var(--font-family); font-size: var(--font-size-base);
padding: var(--space-3); border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-card-bg); outline: none;
width: 100%;
}
.qa-input:focus, .qa-num-input:focus {
border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(201,123,90,0.12);
}

.qa-num-row { display: flex; align-items: center; gap: var(--space-2); }
.qa-num-btn {
width: 40px; height: 40px; border-radius: var(--radius-md);
border: 1px solid var(--color-border); background: var(--color-card-bg);
cursor: pointer; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
color: var(--color-text-secondary);
}
.qa-num-btn:hover { background: var(--color-bg); border-color: var(--color-primary); color: var(--color-primary); }
.qa-num-input { width: 100px; text-align: center; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }

.qa-time-row { display: flex; gap: var(--space-3); align-items: center; }
.qa-time-row input[type="time"] { font-family: var(--font-family-mono); }

.qa-receipt-btn {
width: 100%; padding: var(--space-5);
border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
background: var(--color-bg); color: var(--color-text-secondary);
font-family: var(--font-family); font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold); cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: var(--space-2);
transition: all var(--duration-fast);
}
.qa-receipt-btn:hover {
border-color: var(--color-primary); color: var(--color-primary);
background: rgba(201,123,90,0.06);
}
.qa-receipt-btn .ico { font-size: 24px; }

.qa-divider {
display: flex; align-items: center; gap: var(--space-3);
font-size: var(--font-size-xs); color: var(--color-text-muted);
margin: var(--space-1) 0;
}
.qa-divider::before, .qa-divider::after {
content: ''; flex: 1; height: 1px; background: var(--color-border);
}

.qa-pill-group { display: flex; gap: var(--space-2); }
.qa-pill {
flex: 1; padding: var(--space-3); text-align: center;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
background: var(--color-card-bg); font-family: var(--font-family);
font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary); cursor: pointer;
}
.qa-pill.is-active {
background: rgba(201,123,90,0.10); color: var(--color-primary);
border-color: var(--color-primary);
}

.qa-lot-display {
font-family: var(--font-family-mono); font-size: var(--font-size-sm);
background: var(--color-bg); padding: var(--space-3);
border-radius: var(--radius-md); color: var(--color-text-secondary);
border: 1px dashed var(--color-border);
}
.qa-lot-display strong { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

.qa-foot {
display: flex; gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-border);
background: var(--color-card-bg);
}
.qa-foot .btn { flex: 1; padding: var(--space-3) var(--space-5); }

@media (max-width: 768px) {
.fab { right: var(--space-4); bottom: var(--space-4); width: 56px; height: 56px; font-size: 24px; }
}