            <CardContent>
              <div className="space-y-4">
                {/* 상단 액션 */}
                <div className="flex items-center justify-between">
                  <div className="text-sm text-muted-foreground">
                    품목별 단가를 계산하는 수식을 설정하세요
                  </div>
                  <Button onClick={handleAddPriceMapping}>
                    <Plus className="h-4 w-4 mr-2" />
                    단가 맵핑 추가
                  </Button>
                </div>

                {/* 맵핑 리스트 */}
                {priceMappingItems.length === 0 ? (
                  <div className="text-center py-12 text-gray-500">
                    <Calculator className="h-12 w-12 mx-auto mb-4 opacity-50" />
                    <p>등록된 단가 맵핑이 없습니다.</p>
                    <p className="text-sm mt-2">"단가 맵핑 추가" 버튼을 클릭하여 추가하세요.</p>
                  </div>
                ) : (
                  <>
                    {/* 모바일/태블릿 카드 뷰 */}
                    <div className="lg:hidden space-y-3">
                      {priceMappingItems.map((mapping, index) => (
                        <div key={mapping.id} className={`border rounded-lg p-4 space-y-3 bg-white dark:bg-card hover:bg-muted/50 transition-colors shadow-sm ${mapping.enabled ? "border-blue-300 bg-blue-50/30" : "border-gray-200"}`}>
                          <div className="flex items-start gap-3">
                            <Checkbox
                              checked={mapping.enabled}
                              onCheckedChange={() => togglePriceMappingEnabled(mapping.id)}
                              onClick={(e) => e.stopPropagation()}
                              className="mt-1"
                            />
                            <div className="flex-1 min-w-0 space-y-3">
                              {/* 번호 */}
                              <Badge variant="outline" className="bg-gray-100 text-gray-700 font-mono text-xs">
                                #{priceMappingItems.length - index}
                              </Badge>

                              {/* 제목 */}
                              <div className="font-semibold text-base">{mapping.itemName}</div>

                              {/* 부제목 */}
                              <div className="text-sm text-muted-foreground">{mapping.itemCode}</div>

                              {/* 필드 */}
                              <div className="grid grid-cols-2 gap-2 text-sm">
                                <div className="space-y-1">
                                  <div className="text-xs text-muted-foreground">품목 단가</div>
                                  <div className="font-medium text-blue-600">{mapping.basePrice.toLocaleString()}원</div>
                                </div>
                                <div className="space-y-1">
                                  <div className="text-xs text-muted-foreground">계산 수식</div>
                                  <div className="font-medium font-mono text-xs">{mapping.quantityFormula}</div>
                                </div>
                                {mapping.description && (
                                  <div className="col-span-2 space-y-1">
                                    <div className="text-xs text-muted-foreground">설명</div>
                                    <div className="font-medium">{mapping.description}</div>
                                  </div>
                                )}
                              </div>

                              {/* 액션 */}
                              <div className="flex gap-2 pt-2">
                                <Button
                                  variant="outline"
                                  size="sm"
                                  onClick={() => handleEditPriceMapping(mapping)}
                                >
                                  <Edit className="h-4 w-4 mr-1" />
                                  수정
                                </Button>
                                <Button
                                  variant="outline"
                                  size="sm"
                                  onClick={() => handleDeletePriceMapping(mapping.id)}
                                >
                                  <Trash2 className="h-4 w-4 mr-1 text-red-500" />
                                  삭제
                                </Button>
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>

                    {/* 데스크톱 테이블 뷰 */}
                    <div className="hidden lg:block border rounded-lg overflow-hidden">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead className="w-[60px]">활성화</TableHead>
                            <TableHead className="w-[60px]">번호</TableHead>
                            <TableHead className="w-[150px]">품목 코드</TableHead>
                            <TableHead>품목명</TableHead>
                            <TableHead className="w-[120px]">품목 단가</TableHead>
                            <TableHead className="w-[200px]">계산 수식</TableHead>
                            <TableHead className="w-[200px]">설명</TableHead>
                            <TableHead className="w-[100px]">작업</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {priceMappingItems.map((mapping, index) => (
                            <TableRow key={mapping.id} className={mapping.enabled ? "bg-blue-50/30" : ""}>
                              <TableCell>
                                <Checkbox
                                  checked={mapping.enabled}
                                  onCheckedChange={() => togglePriceMappingEnabled(mapping.id)}
                                />
                              </TableCell>
                              <TableCell>
                                <Badge variant="outline" className="font-mono text-xs">
                                  {priceMappingItems.length - index}
                                </Badge>
                              </TableCell>
                              <TableCell>
                                <Badge variant="secondary" className="text-xs">
                                  {mapping.itemCode}
                                </Badge>
                              </TableCell>
                              <TableCell className="font-medium">{mapping.itemName}</TableCell>
                              <TableCell className="text-right">
                                <span className="text-blue-600 font-medium">
                                  {mapping.basePrice.toLocaleString()}원
                                </span>
                              </TableCell>
                              <TableCell>
                                <code className="text-xs bg-gray-100 px-2 py-1 rounded font-mono">
                                  {mapping.quantityFormula}
                                </code>
                              </TableCell>
                              <TableCell className="text-sm text-muted-foreground">
                                {mapping.description || "-"}
                              </TableCell>
                              <TableCell>
                                <div className="flex gap-1">
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => handleEditPriceMapping(mapping)}
                                  >
                                    <Edit className="h-4 w-4" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    onClick={() => handleDeletePriceMapping(mapping.id)}
                                  >
                                    <Trash2 className="h-4 w-4 text-red-500" />
                                  </Button>
                                </div>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                  </>
                )}

                {/* 통계 정보 */}
                <div className="grid grid-cols-3 gap-4">
                  <div className="p-3 bg-gray-50 rounded-lg border">
                    <p className="text-xs text-muted-foreground mb-1">전체 맵핑</p>
                    <p className="text-xl font-semibold">{priceMappingItems.length}</p>
                  </div>
                  <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
                    <p className="text-xs text-muted-foreground mb-1">활성화됨</p>
                    <p className="text-xl font-semibold text-blue-600">
                      {priceMappingItems.filter(item => item.enabled).length}
                    </p>
                  </div>
                  <div className="p-3 bg-green-50 rounded-lg border border-green-200">
                    <p className="text-xs text-muted-foreground mb-1">활성화율</p>
                    <p className="text-xl font-semibold text-green-600">
                      {priceMappingItems.length > 0
                        ? Math.round((priceMappingItems.filter(item => item.enabled).length / priceMappingItems.length) * 100)
                        : 0}%
                    </p>
                  </div>
                </div>

                {/* 안내 메시지 */}
                <div className="flex items-start gap-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                  <HelpCircle className="h-5 w-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <div className="text-sm text-blue-900">
                    <p className="font-medium mb-1">사용 방법</p>
                    <ul className="space-y-1 text-blue-700">
                      <li>• <strong>품목 선택</strong>: 품목관리에서 등록한 품목을 선택하면 판매단가가 자동으로 가져와집니다.</li>
                      <li>• <strong>계산 수식</strong>: 수식관리에서 정의한 변수를 활용하여 수량/계수를 계산하는 수식을 입력합니다.</li>
                      <li>• <strong>예시</strong>: "(W0 * H0) / 1000000" 입력 시 면적(㎡) 계산, 최종 단가 = 계산 결과 × 품목 판매단가</li>
                      <li>• <strong>활성화</strong>: 체크박스로 자동 견적 산출에 포함할 맵핑을 선택하세요.</li>
                      <li>• 설정된 단가 맵핑은 자동 견적 산출에서 사용됩니다.</li>
                    </ul>
                  </div>
                </div>
              </div>
            </CardContent>
