/* ══ DRUG SEARCH EMBEDDED ═════════════ */
#view-drug, #view-commission {
  background: var(--cream);
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
}


/* drug-search 컴포넌트 스타일 재정의 */
#view-drug .page-header,
#view-commission .page-header {
  margin-bottom: 20px;
}
#view-drug .page-header h2,
#view-commission .page-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--brown);
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}
#view-drug .search-card,
#view-commission .upload-card,
#view-commission .commission-list-card {
  border-radius: var(--radius);
  border: 1.5px solid var(--gray-200);
  box-shadow: var(--shadow);
}

/* ══ DRUG-SEARCH CSS (원본 → 변수 오버라이드) ══ */
.rate-high { color: #059669; font-weight: 700; }
.rate-med  { color: #d97706; font-weight: 700; }
.rate-low  { color: var(--gray-400); }
.td-left   { text-align: left !important; }
.text-right { text-align: right !important; }
.double-click-hint { cursor: pointer; }
.table-wrapper { overflow-x: auto; }

/* 검색 카드 */
.search-card { background: var(--white); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; border: 1.5px solid var(--gray-200); box-shadow: var(--shadow); }
.search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.search-input-wrap { flex: 1; position: relative; }
.search-input-wrap input { width: 100%; height: 42px; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 0 14px; font-size: 16px; transition: all .15s; }
.search-input-wrap input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.search-btn { height: 42px; padding: 0 22px; background: var(--blue); color: var(--white); border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 700; transition: background .15s; }
.search-btn:hover { background: var(--brown3); }
.search-type-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.radio-label { display: flex; align-items: center; gap: 5px; font-size: 15px; cursor: pointer; color: var(--gray-600); font-weight: 500; }
.filter-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.checkbox-label { display: flex; align-items: center; gap: 5px; font-size: 15px; cursor: pointer; color: var(--gray-600); font-weight: 500; }
.results-card { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--gray-200); box-shadow: var(--shadow); overflow: hidden; }
.results-header { padding: 14px 18px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.results-count { font-size: 15px; color: var(--gray-600); font-weight: 600; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--gray-400); }
.empty-icon { font-size: 42px; margin-bottom: 12px; }

/* 업로드 */
.upload-card { background: var(--white); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; border: 1.5px solid var(--gray-200); box-shadow: var(--shadow); }
.upload-zone { border: 2px dashed var(--gray-200); border-radius: 10px; padding: 36px 20px; text-align: center; cursor: pointer; transition: all .15s; background: var(--gray-50); }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--gold); background: var(--gold-bg); }
.commission-list-card { background: var(--white); border-radius: var(--radius); border: 1.5px solid var(--gray-200); box-shadow: var(--shadow); overflow: hidden; }

/* alert */
.alert { padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.alert-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.alert-info    { background: var(--gold-bg); color: var(--gold); border: 1px solid #bfdbfe; }
.alert { word-break: keep-all; overflow-wrap: break-word; }

/* modal (drug-search) */
.ingredient-modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; }
.ingredient-modal.active { display: flex; }
.ingredient-modal-box { background: var(--white); border-radius: 14px; width: 92%; max-width: 900px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,.22); overflow: hidden; }
.ingredient-modal-header { padding: 18px 22px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; }
.ingredient-modal-header h3 { font-size: 17px; font-weight: 700; }
.ingredient-modal-body { flex: 1; overflow-y: auto; }

/* flex helper */
.flex { display: flex; } .flex-1 { flex: 1; } .gap-2 { gap: 8px; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* ══ MOBILE RESPONSIVE ════════════════════════════════════════ */
@media (max-width: 768px) {